Wechat applet: Simple implementation of map navigation function.
The small pictures inside need to be found by yourself. When debugging on the real machine, click the navigation to enter the map, navigate, and plan routes...
renderings
code:
<!-- 这是地图部分 -->
<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;
}