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

LCIOT

一、在百度地图开发平台申请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可以看到当前地点的相关位置描述信息。
若出现报错，点击地图的圆点依旧能显示位置信息。

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

以上就是获取城市定位信息的全部步骤，感谢观看！

NM2012

感谢分享。