练手写的，先上图
a1.png
a2.png
a3.png
核心代码如下：
index页面
<!-- map -->
<map id="map" longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="16" markers="{{markers}}"
bindmarkertap="markertap" show-location="false" style="width: 100%; height: calc(100% - 460rpx);">
</map>
<view class="bottom1">
<view class="bottom2" bindtap="choose1">
<text class="left">我的位置：</text><text >{{addressName}}</text>
<image src="/img/array.png" class="img_location2"></image>
</view>
</view>
<view class="bottom1">
<view class="bottom2" bindtap="choose2">
<text class="left">目的地：</text><text >{{addressName2}}</text>
<image src="/img/array.png" class="img_location2"></image>
</view>
</view>
<button class="mybtn1 mybutton" bindtap="go">我要打车</button>
const app = getApp()
Page({
data: {
latitude: "",
longitude: "",
addressName: "正在定位中。。。",
addressName2: "请选择目的地",
endLatitude:"",
endLongitude:"",
markers: [{
iconPath: "/img/map1.png",
id: 0,
latitude: "",
longitude: "",
width: 26,
height: 36,
callout: {
content: " 在这里上车 ",
color: "#333",
fontSize: 11,
borderRadius: 34,
display: "ALWAYS",
textAlign: "center",
padding: "5",
borderWidth: "1",
borderColor: "#fff"
}
}],
},
onLoad: function () {
this.getLocation();
},
getLocation: function () {
var that = this;
wx.getLocation({
type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
success(res) {
var markers_new = that.data.markers;
markers_new[0].latitude = res.latitude;
markers_new[0].longitude = res.longitude;
that.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: markers_new
})
that.getAddressName();
//将地址保存在全局变量里面
}, fail(res) {
wx.getSetting({
success: function (res) {
if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
wx.showModal({
title: '请求授权当前位置',
content: '需要获取您的地理位置',
success: function (res) {
if (res.confirm) {
wx.openSetting({
success: function (res) {
if (res.authSetting["scope.userLocation"] == true) {
wx.getLocation({
type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
success(res) {
var markers_new = that.data.markers;
markers_new[0].latitude = res.latitude;
markers_new[0].longitude = res.longitude;
that.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: markers_new
})
that.getAddressName();
}
});
}
}
})
}
}
})
}
},
fail: function (res) {
}
})
}
})
},
getAddressName() {
var that = this;
var locationString = this.data.latitude + "," + this.data.longitude;
//等同于qqsdk获取
wx.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/?get_poi=1',
data: {
"key": "YLFBZ-WHAWI-ZXUGH-53Q65-TOJ7E-ADBNQ",
"location": locationString,
},
method: 'GET',
success: function (r) {
//输出一下位置信息
console.log('用户位置信息', r.data.result.address);
console.log(r.data)
that.setData({
addressName: r.data.result.address
})
app.globalData.latitude = that.data.latitude;
app.globalData.longitude = that.data.longitude;
app.globalData.addressName = that.data.addressName;
}
});
},
choose1:function(){
var that = this;
wx.chooseLocation({
success:function(res){
console.log(res);
if (res.address){
var markers_new = that.data.markers;
markers_new[0].latitude = res.latitude;
markers_new[0].longitude = res.longitude;
that.setData({
latitude: res.latitude,
longitude: res.longitude,
addressName: res.address,
markers: markers_new
})
app.globalData.latitude = res.latitude;
app.globalData.longitude = res.longitude;
app.globalData.addressName = res.address;
}
}
})
},
choose2:function(){
var that = this;
wx.chooseLocation({
success: function (res) {
console.log(res);
if (res.address) {
that.setData({
addressName2: res.address,
endLatitude: res.latitude,
endLongitude: res.longitude,
})
app.globalData.endLatitude = res.latitude;
app.globalData.endLongitude = res.longitude;
app.globalData.endAddressName = res.address;
}
}
})
},
go:function(){
console.log(this.data);
if (this.data.latitude > 0 && this.data.endLatitude > 0){
wx.navigateTo({
url: "/pages/car/car"
});
}else{
wx.showToast({ title: '失败,请选择目的地',})
}
},
goPerson(e) {
wx.navigateTo({
url: "/pages/person/person"
});
},
goCenter(e) {
let mpCtx = wx.createMapContext("map");
mpCtx.moveToLocation();
},
})
打车页面
<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="{{longitude}}" latitude="{{latitude}}" 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>
var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const app = getApp()
Page({
data: {
latitude: 0,
longitude:0,
markers: [{
iconPath: "../../img/map1.png",
id: 0,
latitude: 0,
longitude: 0,
width: 23,
height: 33
}, {
iconPath: "../../img/map2.png",
id: 0,
latitude: 0,
longitude: 0,
width: 24,
height: 34
}],
distance: '',
cost: '',
polyline: []
},
onLoad: function () {
var start1 = app.globalData.longitude;
var start2 = app.globalData.latitude;
var end1 = app.globalData.endLongitude;
var end2 = app.globalData.endLatitude;
var start = start1 + "," + start2;
var end = end1 + "," + end2;
// var d = "116.434446,39.90816";
// var s = "116.481028,39.989643"
// var d = "114.5143,38.04276";
// var s = "114.46022, 38.04982";
// console.log(s);
// console.log(d);
var that = this;
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({ key: key });
myAmapFun.getDrivingRoute({
origin: start,
destination:end,
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])
})
}
}
}
console.log(points);
var markers_new = that.data.markers;
markers_new[0].latitude = start2
markers_new[0].longitude = start1
markers_new[1].latitude = end2
markers_new[1].longitude = end1
console.log(markers_new)
that.setData({
latitude: start2,
longitude: start1,
markers: markers_new,
polyline: [{
points: points,
color: "#0091ff",
width: 6
}]
})
that.mapCtx = wx.createMapContext('navi_map'); // map为地图的id
that.mapCtx.includePoints({
padding: [10],
points: [{
latitude: start2,
longitude: start1,
}, {
latitude: end2,
longitude: end1,
}],
success: function (res) {
console.log(res)
}
})
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) + '元'
});
}
}
})
},
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'
})
}
})
使用的是高德的小程序地图插件，amap，可以到高德的官网查看api：
https://lbs.amap.com/api/wx/guide/get-data/get-inputtips
