高德地图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">