|
本帖最后由 LCIOT 于 2022-2-11 17:12 编辑
一、在百度地图开发平台申请AK
1.1 注册账号
搜索http://lbsyun.baidu.com/进入百度地图开放平台首页,在首页的开发文档下的微信小程序JavaScript API,进入小程序js API的开发,展开左侧的开发指南找到账号与密钥。
也可以直接搜索http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key进入。
进入百度开放平台官网,点击右上角“API控制台”,注册成为百度地图开发者。如果未登录百度账号,会引导登录百度账号。如果账号未注册,请根据提示填写正确的邮箱及手机号完成开发者注册流程。
1.2创建应用
再次点击进入控制台,创建一个新应用。
应用名称自定义、应用类型选择微信小程序、启用服务建议全部勾选、APPID(小程序的APPID)通过微信小程序微信认证获得,完善小程序信息后,AppID已经生成,在小程序发布流程下小程序信息中,查看详情页,一直往后滑即可看到。 完成后即可提交。
1.3获取密钥(AK)
创建好应用后,即可在应用页面看到申请成功的密钥(AK)。
二、下载API模块
在百度地图开放平台下载百度地图微信小程序JavaScript API。
搜索http://lbs.baidu.com/index.php?title=wxjsapi/wxjs-download进行下载。
解压后在wxapp-jsapi-master文件夹下的src中又两个JS文件,bmap-wx.js为常规没压缩的,bmap-wx.min.js是压缩过的,由于微信小程序项目文件大小有限制,建议使用压缩的。
在项目中新建一个文件夹libs,将bmap-wx.min.js文件拷贝到libs下。
三、解析位置坐标
在编写代码前,可以临时开启开发环境不校验请求域名、TLS版本及HTTPS证书 选项,跳过服务器域名的校验。
打开js文件,用下面的代码完全替换原代码。
在以下的代码中,首先引用百度地图微信小程序JavaScript API模块,借助百度地图完成获取城市定位信息,然后解析位置坐标。
注意替换您的AK!!!
1.// 引用百度地图微信小程序JSAPI模块
2.var bmap = require('../../libs/bmap-wx.min.js');
3.var wxMarkerData = [];
4.Page({
5. data: {
6. markers: [],
7. latitude: '',
8. longitude: '',
9. rgcData: {}
10. },
11. makertap: function (e) {
12. var that = this;
13. var id = e.markerId;
14. that.showSearchInfo(wxMarkerData, id);
15. },
16. onLoad: function () {
17. var that = this;
18. // 新建百度地图对象
19. var BMap = new bmap.BMapWX({
20. ak: '您的ak'
21. });
22. var fail = function (data) {
23. console.log(data)
24. };
25. var success = function (data) {
26. wxMarkerData = data.wxMarkerData;
27. that.setData({
28. markers: wxMarkerData
29. });
30. that.setData({
31. latitude: wxMarkerData[0].latitude
32. });
33. that.setData({
34. longitude: wxMarkerData[0].longitude
35. });
36. }
37. // 发起regeocoding检索请求
38. BMap.regeocoding({
39. fail: fail,
40. success: success,
41. iconPath: '../../img/marker_red.png',
42. iconTapPath: '../../img/marker_red.png'
43. });
44. },
45. showSearchInfo: function (data, i) {
46. var that = this;
47. that.setData({
48. rgcData: {
49. address: '地址:' + data.address + '\n',
50. desc: '描述:' + data.desc + '\n',
51. business: '商圈:' + data.business
52. }
53. });
54. }
55.
56.})
打开 wxml 文件,用下面的代码完全替换原代码。
1.<view class="map_container">
2. <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
3.</view>
4.<view class="rgc_info">
5. <text>{{rgcData.address}}</text>
6. <text>{{rgcData.desc}}</text>
7. <text>{{rgcData.business}}</text>
8.</view>
打开 wxss 文件,用下面的代码完全替换原代码。
1..map_container{
2. height: 300px;
3. width: 100%;
4.}
5.
6..map {
7. height: 100%;
8. width: 100%;
9.}
最后保存修改,点击marker可以看到当前地点的相关位置描述信息。
若出现报错,点击地图的圆点依旧能显示位置信息。
这个错误是因为在我们的项目中没有这些图片,可以将这两句屏蔽或替换自己的图片。
以上就是获取城市定位信息的全部步骤,感谢观看! |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有帐号?注册
x
阿莫论坛20周年了!感谢大家的支持与爱护!!
阿莫论坛才是最爱国的,关心国家的经济、社会的发展、担心国家被别国牵连卷入战争、知道珍惜来之不易的和平发展,知道师夷之长,关注世界的先进文化与技术,也探讨中国文化的博大精深,也懂得警惕民粹主义的祸国殃民等等等等,无不是爱国忧民的表现。(坛友:tianxian)
|