微信小程序:简单实现地图导航功能实现
里面的小图片需要自己找,真机调试时,点击导航即可进入地图,可导航,规划路线…
效果图
代码:
<!-- 这是地图部分 -->
<view class="map_container">
<map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' controls="{{controls}}" bindcontroltap="bindcontroltap" polyline='{{polyline}}' circles="{{circles}}" bindmarkertap='bindmarkertap' bindcontroltap='bindcontroltap' show-location >
</map>
</view>
<!-- 以下是导航部分 -->
<view class='list-guide'>
<!-- 这里的坐标本应该是从服务器获取数据的,这时先写死在页面上了data-latitude='39.92392' data-longitude='116.411885' -->
<view bindtap="onGuideTap" data-latitude='39.92392' data-longitude='116.411885' data-bankName='最高人民检察院'>
<image src='http://10.3.236.167/images/1.png' class='list-guide-imgae'></image>
<text class='list-guide-text'>导航</text>
</view>
</view>
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
addmissage: '选的位置',
// markers Array 标记点
stitle: '故宫',
latitude: "",
longitude: "",
scale: 14,
markers: [],
distanceArr: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
//获取当前的地理位置、速度
wx.getLocation({
type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
success: function (res) {
console.log(res);
//赋值经纬度
that.setData({
latitude: res.latitude,
longitude: res.longitude,
})
// 发送给朋友、分享朋友圈
app.onShareAppMessage();
}
})
},
//导航
onGuideTap: function (event) {
var lat = Number(event.currentTarget.dataset.latitude);
var lon = Number(event.currentTarget.dataset.longitude);
var bankName = event.currentTarget.dataset.bankname;
console.log(lat);
console.log(lon);
wx.openLocation({
type: 'gcj02',
latitude: lat,
longitude: lon,
name: bankName,
scale: 28
})
},
})
.map_container {
margin-bottom: 80rpx;
height: 420px;
width: 100%;
}
.map {
position: relative;
height: 100%;
width: 100%;
}
.list-guide {
display: flex;
flex-direction: row;
justify-content: space-around;
height: 90rpx;
}
.list-guide-imgae {
height: 80rpx;
width: 80rpx;
margin-right: 20px;
vertical-align: middle;
}
.list-guide-text {
vertical-align: middle;
line-height: 90rpx;
font-size: 35rpx;
}