三步实现通过百度地图开发平台获取城市定位信息
一、在百度地图开发平台申请AK
1、注册账号
2、创建应用
3、获取密钥(AK)
二、下载API模块
三、解析位置坐标
一、在百度地图开发平台申请AK
1、 注册账号
搜索http://lbsyun.baidu.com/进入百度地图开放平台首页，在首页的开发文档下的微信小程序JavaScript API，进入小程序js API的开发，展开左侧的开发指南找到账号与密钥（也可以直接搜索http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key进入）。
进入百度开放平台官网，点击右上角“API控制台”，注册成为百度地图开发者。如果未登录百度账号，会引导登录百度账号。如果账号未注册，请根据提示填写正确的邮箱及手机号完成开发者注册流程。
2、创建应用
再次点击进入控制台，创建一个新应用。
应用名称自定义、应用类型选择微信小程序、启用服务建议全部勾选、APPID（小程序的APPID）通过微信小程序微信认证获得，完善小程序信息后，AppID已经生成，在小程序发布流程下小程序信息中，查看详情页，一直往后滑即可看到。 完成后即可提交。
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[i].address + '\n',
50. desc: '描述：' + data[i].desc + '\n',
51. business: '商圈：' + data[i].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可以看到当前地点的相关位置描述信息。
若出现报错，点击地图的圆点依旧能显示位置信息。
这个错误是因为在我们的项目中没有这些图片，可以将这两句屏蔽或替换自己的图片。
以上就是获取城市定位信息的全部步骤，感谢您的观看！