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

本文章介绍微信小程序调用高德地图API的过程，使用高德定位功能做演示。

微信小程序目前支持百度地图、高德地图、腾讯地图。用法可以说是基本完全一样，本文章以高德为例，简单说一下他们的区别，高德地图精度应该是最准确的，毕竟本来就是做地图出生的。百度地图的精度目前较高德而言，还是要稍稍欠缺一点，但是他的附近商家那些要比高德好一点。而关于腾讯地图，暂时来说还是只能表示呵呵，希望越来越好吧。

1.既然本章是介绍微信小程序如何使用高德地图API，那么第一件事肯定是进入高德地图开放平台(https://lbs.amap.com/)。此处需要注册，登录。

2.完成登陆后，进入控制台，在左边侧边栏里点击 应用管理->我的应用-> 创建新应用，会生成一个key，这个key在后面将会用到。记住绑定服务选择 微信小程序

3.登录微信开发者平台，在服务器域名设置里将高德地图的域名设置好

4.在你的项目中新建一个目录libs，将amap-wx.js文件放入此目录里(amap-wx.js下载地址：https://lbs.amap.com/api/wx/download，解压出来会有两个文件，此处只需要一个)，结果如下：

5.在libs目录下创建配置文件config.js，写入第二步获取的key，例如

，高德api配置到这儿就结束了，以下是我调用高德实现定位的demo

JS部分：

var amapFile = require(’…/…/libs/amap-wx.js’); //引入高德js

var config = require(’…/…/libs/config.js’); //引用我们的配置文件

Page({

data: {

markers: [],

latitude: ‘’,

longitude: ‘’,

textData: {}

},

onLoad: function () {

var that = this;

var key = config.Config.key;

var myAmapFun = new amapFile.AMapWX({ key: key });

myAmapFun.getRegeo({

iconPath: “…/…/img/marker.png”,

iconWidth: 22,

iconHeight: 32,

success: function (data) {

console.log(data);

var marker = [{

id: data[0].id,

latitude: data[0].latitude,

longitude: data[0].longitude,

iconPath: data[0].iconPath,

width: data[0].width,

height: data[0].height

}]

that.setData({

markers: marker

});

that.setData({

latitude: data[0].latitude

});

that.setData({

longitude: data[0].longitude

});

that.setData({

textData: {

name: data[0].name,

desc: data[0].desc

}

})

},

fail: function (info) {

// wx.showModal({title:info.errMsg})

}

})

}

})

WXML部分遇新是直朋能到：

{{textData.name}}

{{textData.desc}}

WXSS部分遇新是直朋能到：

.map_container{

position: absolute;

top: 0;

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;

}

此页面大概长这样：

本文来源于网络：查看 >https://blog.csdn.net/weixin_39815001/article/details/84616634