微信小程序地图插件系列（一）：微信小程序使用高德地图（不定期更新）
前言
小程序默认的map组件地图是腾讯地图，但是我们常常会遇到一些需求，让用户选择使用自己喜欢的地图，对于这些功能也是我们前端开发工程师的必要技能。
微信小程序地图插件系列其他文章
微信小程序地图插件系列（二）：微信小程序使用百度地图
提示：以下是本篇文章正文内容，下面案例可供参考
效果展示
一、准备阶段
- 1、在高德开放平台注册成为开发者
- 2、申请开发者密钥（key）。
- 3、下载并解压高德地图微信小程序SDK
二、快速上手
- 1、创建一个小程序
- 2、创建一个map文件夹，并创建page页面
- 3、打开map.js文件，用下面的代码完全替换原代码。（注意：js文件中要使用自己的高德key）
// miniprogram/pages/gao_de/gao_de.js
var amapFile = require('../../libs/amap-wx.js');//如：../../libs/amap-wx.js
Page({
/** * 页面的初始数据 */
data: {
markers: [{
iconPath: "../../img/mapicon_navi_s.png",
id: 0,
latitude: 39.989643,
longitude: 116.481028,
width: 23,
height: 33
},{
iconPath: "../../img/mapicon_navi_e.png",
id: 0,
latitude: 39.90816,
longitude: 116.434446,
width: 24,
height: 34
}],
distance: '',
cost: '',
polyline: []
},
/** * 生命周期函数--监听页面加载 */
onLoad: function (options) {
var that = this;
var myAmapFun = new amapFile.AMapWX({
key:'你的高德key'});
myAmapFun.getPoiAround({
success: function(data){
console.log(data)
//成功回调
},
fail: function(info){
//失败回调
console.log(info)
}
})
//获取自己所在地址的定位
myAmapFun.getRegeo({
success: function(data){
//成功回调
console.log('---------')
console.log(data)
},
fail: function(info){
//失败回调
console.log(info)
}
})
//获取定位地点天气内容
myAmapFun.getWeather({
success: function(data){
console.log(data,'123')
//成功回调
},
fail: function(info){
//失败回调
console.log(info)
}
})
//路线
myAmapFun.getDrivingRoute({
origin: '116.481028,39.989643',
destination: '116.434446,39.90816',
success: function(data){
var points = [];
if(data.paths && data.paths[0] && data.paths[0].steps){
var steps = data.paths[0].steps;
for(var i = 0; i < steps.length; i++){
var poLen = steps[i].polyline.split(';');
for(var j = 0;j < poLen.length; j++){
points.push({
longitude: parseFloat(poLen[j].split(',')[0]),
latitude: parseFloat(poLen[j].split(',')[1])
})
}
}
}
that.setData({
polyline: [{
points: points,
color: "#0091ff",
width: 6
}]
});
if(data.paths[0] && data.paths[0].distance){
that.setData({
distance: data.paths[0].distance + '米'
});
}
if(data.taxi_cost){
that.setData({
cost: '打车约' + parseInt(data.taxi_cost) + '元'
});
}
},
fail: function(info){
}
})
},
goDetail: function(){
wx.navigateTo({
url: '../navigation_car_detail/navigation'
})
},
goToCar: function (e) {
wx.redirectTo({
url: '../navigation_car/navigation'
})
},
goToBus: function (e) {
wx.redirectTo({
url: '../navigation_bus/navigation'
})
},
goToRide: function (e) {
wx.redirectTo({
url: '../navigation_ride/navigation'
})
},
goToWalk: function (e) {
wx.redirectTo({
url: '../navigation_walk/navigation'
})
},
})
- 4、打开pages/map/map.wxml文件，用下面代码完全替换
<view class="flex-style">
<view class="flex-item active" bindtouchstart="goToCar">驾车</view>
<view class="flex-item" bindtouchstart="goToWalk">步行</view>
<view class="flex-item" bindtouchstart="goToBus">公交</view>
<view class="flex-item" bindtouchstart="goToRide">骑行</view>
</view>
<view class="map_box">
<map id="navi_map" longitude="116.451028" latitude="39.949643" scale="12" markers="{
{markers}}" polyline="{
{polyline}}"></map>
</view>
<view class="text_box">
<view class="text">{
{distance}}</view>
<view class="text">{
{cost}}</view>
<view class="detail_button" bindtouchstart="goDetail">详情</view>
</view>
- 5、拷贝样式代码到 pages/index/index.wxss文件
.flex-style{
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.flex-item{
height: 35px;
line-height: 35px;
text-align: center;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1
}
.flex-item.active{
color:#0091ff;
}
.map_box{
position:absolute;
top: 35px;
bottom: 90px;
left: 0px;
right: 0px;
}
#navi_map{
width: 100%;
height: 100%;
}
.text_box{
position:absolute;
height: 90px;
bottom: 0px;
left: 0px;
right: 0px;
}
.text_box .text{
margin: 15px;
}
.detail_button{
position:absolute;
bottom: 30px;
right: 10px;
padding: 3px 5px;
color: #fff;
background: #0091ff;
width:50px;
text-align:center;
border-radius:5px;
}
- 6、点击保存，他会出现下属提示
getLocation需要在app.json中声明permission
- 7、找到app.json文件，在配置上添加如下代码即可。
"permission": {
"scope.userLocation":{
"desc":
}
},
这里请大家对应替换自己pages/map/map.js中的图片路径。以便于更直观的看到效果。
总结
就先入个门。想继续和我完成后续学习的同志们，请关注我。以便于我更新后能通知到您！！！
查看10道真题和解析
