微信小程序 高德地图知道两点求道路_微信小程序 接高德地图API

前置工作

注册登录及入口

登录 高德地图官网 - 开发支持 - 微信小程序SDK

控制台 - 应用管理 - 我的应用 - 创建应用 - 应用下添加新的KEY以及信息

添加key

小程序开发者后台 - 开发管理 - 服务器域名 - 添加高德地图域名白名单 https://restapi.amap.com

下载高德地图SDK文件 - 引入amap-wx.js文件到需要添加地图的js内

获取用户坐标权限

在app.json中，添加获取目标位置的权限：

"permission": {

"scope.userLocation": {

"desc": "你的位置信息将用于小程序位置接口的效果展示"

}

}

正式接入

在小程序目标页面 - 引入amap-wx.js文件后 - 通过上面的key来实例化地图

var amapFile = require('../../resources/js/amap-wx.js');

var myAmapFun = new amapFile.AMapWX({ key: 上面应用下的key });

基本结构

id="map"

class="mapEle"

longitude="{ {longitude}}"

latitude="{ {latitude}}"

scale="16"

show-location="true"

markers="{ {markers}}"

polyline="{ {polyline}}"

bindmarkertap="makertapFn"

show-scale="true"

>

通过myAmapFun可以实现的基本功能：

获取用户所在地区的基本信息

getRegeoFn(){

var that = this;

myAmapFun.getRegeo({

success: function(data){

if(data[0]){

var _yourCity = data[0].regeocodeData.addressComponent.province;

that.setData({

yourCity: _yourCity