- 小程序map组件 实现地图显示
<view class="wrapper">
<map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" polyline="{{polyline}}" enable-traffic></map>
<view class="input">
<input type="text" bindinput="getInputValue"></input>
<view class="ok" bindtap="serach">确认</view>
</view>
</view>
- 获取用户当前位置坐标
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
key: 'ZBLBZ-S7Q6U-VTZVB-2FCL7-S223O-CTFX2' // 必填
});
import gcoord from '../../utils/gcoord.js';
//1、获取当前位置坐标
wx.getLocation({
type: 'wgs84',
success: function(res) {
var result = gcoord.transform(
[res.longitude, res.latitude], // 经纬度坐标
gcoord.WGS84, // 当前坐标系
gcoord.GCJ02);
//2、根据坐标获取当前位置名称
qqmapsdk.reverseGeocoder({
location: {
latitude: result[1],
longitude: result[0]
},
success: function(addressRes) {
var address = addressRes.result.formatted_addresses.recommend;
// console.log(addressRes)
that.setData({
longitude: addressRes.result.location.lng,
latitude: addressRes.result.location.lat,
markers: [{ //当前位置标注点
iconPath: "../images/mpa-icon.png",
id: 0,
latitude: addressRes.result.location.lat,
longitude: addressRes.result.location.lng,
width: 50,
height: 50
}],
city: addressRes.result.address_component.city //当前所在城市
})
},
fail: function(res) {
console.log(res)
}
})
}
})
- 获取目的地 并 把位置转换成经纬度坐标
let that = this
qqmapsdk.geocoder({
address: this.data.city + this.data.address,
complete: res => {
console.log(res); //经纬度对象
that.dispose(res) //处理路径函数
}
})
- 获取并处理路径(经纬度数组)
dispose: function(res) {
let that = this,
pl = [];
qqmapsdk.direction({ //获取路径
from: {
latitude: that.data.latitude,
longitude: that.data.longitude
},
to: {
latitude: res.result.location.lat,
longitude: res.result.location.lng
},
complete: res => {
console.log(res)
var coors = res.result.routes[0]['polyline'];
for (var i = 2; i < coors.length; i++) {
coors[i] = coors[i - 2] + coors[i] / 1000000
}
console.log(coors)
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push({
latitude: coors[i],
longitude: coors[i + 1]
})
}
console.log(pl)
that.setData({
latitude: pl[0].latitude,
longitude: pl[0].longitude,
polyline: [{
points: pl,
color: '#FF0000DD',
width: 4
}]
})
}
})
}
最后点击确认的结果