|
前言
小程序默认的map组件地图是腾讯地图，但是我们常常会遇到一些需求，让用户选择使用自己喜欢的地图，对于这些功能也是我们前端开发工程师的必要技能。
地址链接 1、高德地图，小程序sdk文档地址 2、高德地图，小程序sdk下载地址
微信小程序地图插件系列其他文章 微信小程序地图插件系列（二）：微信小程序使用百度地图
提示：以下是本篇文章正文内容，下面案例可供参考
效果展示
一、准备阶段
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
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文件，用下面代码完全替换
驾车
步行
公交
骑行
|