微信小程序开发(第二天)-引用高德地图、定位等

主要介绍如何引用高德地图，如何定位数据等

一、准备阶段
借鉴一位博主 微信小程序地图插件系列（一）：微信小程序使用高德地图（不定期更新）

1. 在高德开放平台注册成为开发者并申请小程序的开发者密钥
   
   由于我已经申请过了，就截图展示一下，下面是我申请成功后的页面
   

2. 下载高德地图小程序sdk并解压将“amap-wx.130.js”文件存放至项目的“components”文件下
   二、引用高德地图
   创建一个map文件夹，并创建page页面，在map.js文件夹内导入高德地图sdk

var amapFile=require('../../components/map-wx/amap-wx.130.js');
Page({

  /**
   * 先初始化一些markers数据用来显示
   */
  data: {
    longitude:121.517439,
    latitude: 31.34541,
    markers: [{
      id: 0,
      latitude: 31.34541,
      longitude:121.517439,
      width: 23,
      height: 33
    },{
      id: 1,
      latitude: 31.281641,
      longitude: 121.558293,
      width: 24,
      height: 34
    }] 
  },
  onLoad(options) {
    var that=this;
    var myamap=new amapFile.AMapWX({key:'331959b642d93aa8d4cdcd0e4a7c0d25'});  //这里存放的是申请的密钥key
  },

map.wxml文件

<view class="map_box">
  <map id="navi_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="12" markers="{{markers}}"  ></map>
</view>

map.wxss文件

.map_box{
  position:absolute;
  top: 55px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
#navi_map{
  width: 100%;
  height: 100%;
}

app.json文件要添加上此页面

 "pages": [
    "pages/index/index",
    "pages/map/map"
  ],

页面展示

三、bug

1. 问题“getLocation:fail the api need to be declared in the requiredPrivateInfos ”
   问题原因：没有在代码中声明requiredPrivateInfos这个api
   解决办法：在app.json中声明此api，如下所示

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

此时依旧报错，百度了一下原因，发现需要在小程序管理后台，找到开发-开发管理-接口设置，将权限打开，如下

2. 预使用真机调试时以下bug

message：Error: components/map-wx/__MACOSX/._amap-wx.130.js: components/map-wx/__MACOSX/._amap-wx.130.js file is not in UTF-8 encoding
appid: wx810e1b49b5dee03a
openid: o6zAJs47dGpcijUEebWKvVtGUfjE
ideVersion: 1.06.2307260
osType: win32-x64
time: 2023-09-04 15:08:32

问题原因：复制高德sdk至components文件夹时将“_MACOSX”文件也复制过来了，里面有一个“._amap-wx.130.js”文件，这是个隐藏文件，以“.”开头，删除就可以了

3. 问题：“https://restapi.amap.com 不在以下 request 合法域名列表中”
解决办法：
第一种：在小程序管理后台，找到开发-开发管理-开发设置，添加服务器域名

第二种：在开发工具中详情-本地设置，将“不校验合法域名、…”勾选上。