微信小程序入门3--获取城市定位信息

湖畔科技

借助百度地图完成获取城市定位信息，首先要获取服务密钥(ak)，然后解析位置坐标。

想要获取ak，则需要注册百度账号、申请成为百度开发者，在上一节微信小程序入门2中有详细说明。

打开自己新建的pages/demo/demo.js 文件，用下面的代码完全替换原代码。

在以下代码中需要引用百度地图微信小程序JavaScript API 模块,具体的下载方法在上一节微信小程序入门2中有详细说明。

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[i].address + '\n',
    
50.         desc: '描述：' + data[i].desc + '\n',
    
51.         business: '商圈：' + data[i].business
    
52.       }
    
53.     });
    
54.   }
    
55. 
    
56. })

复制代码

打开 pages/demo/demo.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>

复制代码

将以下代码复制到pages/demo/demo.wxss文件中。

1. .map_container{
   
2.     height: 300px;
   
3.     width: 100%;
   
4. }
   
5. 
   
6. .map {
   
7.     height: 100%;
   
8.     width: 100%;
   
9. }

复制代码

最后保存修改，点击marker可以看到当前地点的相关位置描述信息。

若出现报错，点击地图的圆点依旧能显示位置信息。

这个错误是因为在我们的项目中没有这些图片，可以将这两句屏蔽或替换自己的图片。