微信小程序开发如何开启地图定位（个人开发版）（连接第三方百度地图api）

目前腾讯位置服务提供路线规划、地图选点、地铁图、城市选择器插件四款插件产品

在微信公众平台 选择开发工具可开启腾讯位置服务

之后便可以在 设置--第三方设置中添加自己所需要的腾讯地图插件

因为我做的小程序中需要用到地图选点功能 但是在安装地图选点插件时 会出现小程序类目不符合或主体类目不符合的情况导致安装插件失败

在微信开放社区搜索这一插件后得知 目前个人小程序不支持开通这一插件 需要进行企业认证添加

而我的小程序需要用到获取定位且逆地址解析功能 因此我选择去查找其他第三方开源地图api

以下给出两种第三方地图开放平台地址

高德：https://lbs.amap.com/api/wx/summary/

百度：http://lbsyun.baidu.com/index.php?title=wxjsapi

由于个人喜好问题 我参考的是百度地图微信小程序JavaScript API

接下来就是按照官方文档上的提示来进行api的调用

首先是要注册百度账号，成为个人百度地图开发者 之后创建应用 获取ak

之后配置环境 引入js 以及在微信公众平台 配置项目的合法request域名

接下来就可以在自己的微信小程序里 使用到百度地图为小程序提供的POI查询、模糊查询、地址转换和天气查询功能

这里就列出在实现逆地址解析时所需的代码

1. 打开快速创建的微信小程序 pages/index/index.js 文件，用下面的代码完全替换原代码

// 引用百度地图微信小程序JSAPI模块 
var bmap = require('../../libs/bmap-wx.js'); 
var wxMarkerData = []; 
Page({ 
    data: { 
        markers: [], 
        latitude: '', 
        longitude: '', 
        rgcData: {} 
    }, 
    makertap: function(e) { 
        var that = this; 
        var id = e.markerId; 
        that.showSearchInfo(wxMarkerData, id); 
    }, 
    onLoad: function() { 
        var that = this; 
        // 新建百度地图对象 
        var BMap = new bmap.BMapWX({ 
            ak: '您的ak' 
        }); 
        var fail = function(data) { 
            console.log(data) 
        }; 
        var success = function(data) { 
            wxMarkerData = data.wxMarkerData; 
            that.setData({ 
                markers: wxMarkerData 
            }); 
            that.setData({ 
                latitude: wxMarkerData[0].latitude 
            }); 
            that.setData({ 
                longitude: wxMarkerData[0].longitude 
            }); 
        } 
        // 发起regeocoding检索请求 
        BMap.regeocoding({ 
            fail: fail, 
            success: success, 
            iconPath: '../../img/marker_red.png', 
            iconTapPath: '../../img/marker_red.png' 
        }); 
    }, 
    showSearchInfo: function(data, i) { 
        var that = this; 
        that.setData({ 
            rgcData: { 
                address: '地址：' + data[i].address + '\n', 
                desc: '描述：' + data[i].desc + '\n', 
                business: '商圈：' + data[i].business 
            } 
        }); 
    } 
  
})

2. 为能够正常展示地图和检索结果，打开 pages/index/index.wxml 文件，用下面的代码完全替换原代码

<view class="map_container"> 
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map> 
</view> 
<view class="rgc_info"> 
  <text>{{rgcData.address}}</text> 
  <text>{{rgcData.desc}}</text> 
  <text>{{rgcData.business}}</text> 
</view>

3. 拷贝样式代码到 pages/index/index.wxss文件

.map_container{ 
    height: 300px; 
    width: 100%; 
} 
  
.map { 
    height: 100%; 
    width: 100%; 
}

4. 最后保存修改，即可看到示例效果

本示例在页面加载完成后对当前定位点进行了逆地址解析，点击marker可以看到当前地点的相关位置描述信息。

在把代码复制完后 会出现小程序报错getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json

解决方案：

在app.json中 增加"permission"以及"requiredPrivateInfos"配置

{
    "pages": [
        "pages/index/index",
    ], 
    "permission": {
        "scope.userLocation": {
            "desc": "你的位置将用于小程序位置接口的效果展示"
        }
    },
    "requiredPrivateInfos": ["getLocation","chooseLocation"],
}

配置后 小程序会出现弹窗 是否授权定位信息

确认后即可正常获取到地址信息 demo完成文章来源地址https://www.toymoban.com/news/detail-500989.html