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

引言

该文章用于记录微信小程序的学习历程
该文章学习视频为B站博主 [无敌风火轮12] 发布的《微信小程序引入高德地图SDK进行导航》系列视频

一、高德开放平台SDK

1、获取key

进入 高德开放平台 ，注册并登录账号，进入我的应用并创建新应用。

创建应用成功后，添加key

key添加成功后，即可查看当前key值（key值在开发过程中使用）
提示：公司用的话是需要公司注册一个企业权限的，个人使用的话就比较简单，但是访问会有些限制

2、引入SDK

进入 高德地图微信小程序SDK 并下载高德的SDK

将下载后的压缩包中的js文件放入创建项目的utils文件夹中，并在地图的js页面引入该js文件

二、配置合法域名

1、原因

需要再微信开放平台中配置合法访问的域名，否则会出现如下报错：

2、如何配置

登录进入微信开放平台，点击 开发管理 - 开发设置，下拉找到，服务器域名进行修改

3、配置内容

最开始我参考告警信息

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

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

① https://restapi.amap.com;
② https://apis.map.qq.com;
③ https://7374-study-7gcud6aqea752316-1329072595.tcb.qcloud.la;
④ https://tcb-api.tencentcloudapi.com；

4、刷新配置信息

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

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

刷新一下，重新编译

此时显示没有问题，预估第三步可只配置[https://restapi.amap.com]，具体情况开发者自行判断

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

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 markers = [];
    for(var i=0; i<this.data.length; i++){  //遍历到当前id时，替换图标
      if(i == id){
        data[i].iconPath = "";  //选中点位
      }else{
        data[i].iconPath = "";  //未选中点位
      }
      markers.push(data[i]);
    }
    this.setData({  //再重新赋值一遍
      markers: markers
    })
  }

})

4、全局配置 app.json

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