高德地图SDK嵌入微信小程序之获取当前位置

大家好，欢迎来到IT知识分享网。

引言

一、高德开放平台SDK

1、获取key

2、引入SDK

二、配置合法域名

1、原因

2、如何配置

3、配置内容

最开始我参考告警信息

https://restapi.amap.com 不在以下 request 合法域名列表中 

只配置了①，没有效果，于是我把告警信息下方数组的三个链接也加了进去

4、刷新配置信息

此时重新编译代码还是无效，看到调试器信息如下

如若已在管理后台更新域名配置，请刷新项目配置后重新编译项目，操作路径：“详情-域名信息” 

三、获取当前位置并展示于地图

1、地图页面 map.wxml

<view class="map_container"> <map class="map" id="map" longitude="{ 
    {longitude}}" latitude="{ 
    {latitude}}" scale="14" show-location="true" markers="{ 
    {markers}}" bindmarkertap="makertap" polyline="{ 
    {polyline}}" include-points="{ 
    {includePoints}}"></map> </view> <!--地图描述--> <view class="map_text"> <text class="h1">{ 
  {textData.name}}</text> <text>{ 
  {textData.desc}}</text> <view class="text_box" wx:if="{ 
    {daohang}}"> <!--开始导航展示的内容 距离 打车费用 text_box用z-index覆盖在地点描述上面--> <view class="text">{ 
  {distance}}</view> <view class="text">{ 
  {cost}}</view> </view> </view> 

2、地图样式 map.wxss

/* pages/map/map.wxss */ .section{ 
    height: 80px; width: 100%; } .section input{ 
    width: 90%; margin: 5px auto; border: 1px solid #c3c3c3; height: 30px; border-radius: 3px; padding: 0 5px; } .map_container{ 
    position: absolute; top: 115px; bottom: 80px; left: 0; right: 0; } .map{ 
    width: 100%; height: 100%; } .map_text{ 
    position: absolute; left: 0; right: 0; bottom: 0px; height: 80px; background: #fff; padding: 0 15px; } text{ 
    margin: 5px 0; display: block; font-size: 12px; } .h1{ 
    margin: 15px 0; font-size: 15px; } /* 公交样式 */ .text_box{ 
    margin: 0 15px; padding: 15px 0; border-bottom: 1px solid #c3c3c3; font-size: 13px; } .text_box .text_item{ 
    display: inline-block; line-height: 8px; } 

3、地图格式 map.js

var amapFile = require('../../utils/amap-wx.130') var markersData = [] Page({ 
    data:{ 
    markers: [], //全部的地点标记 latitude: '', //当前位置的纬度 longitude: '', //当前位置的经度 city: '', //当前位置的名称 latitude_e: '', //目的地的纬度 longitude_e: '', //目的地的经度 city_e: '', //目的地的名称 textData: { 
   }, //地点描述信息；就是点击当前标记点的话会展示地点的描述信息 gaode_type: 'car', //导航类型；这里写的car就默认是驾车导航 polyline: [], //导航线；从起点到终点的一条线，可以配置颜色、宽度等 includePoints: [], //包含的点位（后期开发再探索） transits: [], //公交车信息 mapEndObj: { 
   }, //目的地的信息 cost: '', //打车费用 distance: '', //导航总距离 daohang: false, //是否开始导航 mapState: true //目的地搜索状态 }, onLoad: function(){ 
    var that = this; that.getPoiData() //获取当前位置或指定周边位置 }, getPoiData:function (keywords){ 
    var that = this; let params = { 
    iconPathSelected:'../../imgs/map1.png', iconPath:'../../imgs/map0.png', success: function(data){ 
    console.log('当前位置', data) markersData = data.markers; //热门点位 //搜索当前位置 附近poi that.setData({ 
    markers: markersData, //标记 latitude: markersData[0].latitude, longitude: markersData[0].longitude, city: markersData[0].name, }); that.showMarkerInfo(markersData,0); }, fail: function(info){ 
    wx.showModal({ 
    title: info.errMsg }) } } if(keywords){ 
    //如果要做搜索目标附近地点 params.querykeywords = keywords; } var myAmapFun = new amapFile.AMapWX({ 
    //new一个高德地图的对象，调用AMapWX方法，将之前在高德地图开放平台创建的key传进去 key: '你的高德地图的key' }); myAmapFun.getPoiAround(params) }, //点击标记切换描述 makertap: function(e){ 
    var id = e.markerId; var that = this; that.showMarkerInfo(markersData,id); that.changeMarkerColor(markersData,id); }, showMarkerInfo: function(data, id){ 
    var that = this; that.setData({ 
    textData:{ 
    name: data[id].name, desc: data[id].address } }) }, changeMarkerColor: function(data, id){ 
    var that = this; var markers = []; for(var i=0; i<data.length; i++){ 
    //遍历到当前id时，替换图标 if(i == id){ 
    data[i].iconPath = "../../imgs/point1.png"; //选中点位 }else{ 
    data[i].iconPath = "../../imgs/point0.png"; //未选中点位 } markers.push(data[i]); } that.setData({ 
    //再重新赋值一遍 markers: markers }); }, }) 

4、全局配置 app.json

 "permission":{ 
    "scope.userLocation": { 
   "desc":"您的位置信息将用于小程序效果展示"} }, "requiredPrivateInfos": ["getLocation"],