需求
不显示 map 组件,点击对应按钮,从而实现导航
所用到的组件 + API
-
map组件
-
wx.getLocation(Object object) – 获取当前的地理位置、速度。
-
wx.openLocation(Object object) – 使用微信内置地图查看位置。
map地址
API地址
app.json 配置
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
.xml
<view class="shop_info">
<view class="info_item bgWhite" bind:tap="goShowMap">
<i class="iconfont address"></i>
<text>xxxxx地址</text>
</view>
</view>
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}"
bindmarkertap="markertap" bindregionchange="regionchange" show-location style="display: none;">
</map>
.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
//设置标记点
markers: [
{
latitude: 23.1066805,
longitude: 113.3245904,
name: '广州塔',
address: '广州市海珠区阅江西路222号',
}
],
latitude: '',
longitude: '',
},
onLoad: function () {
let _self = this;
wx.getLocation({
type: 'gcj02',
success: (res) => {
_self.setData({
latitude: res.latitude,
longitude: res.longitude
})
}
})
},
//查看地图
goShowMap: function (e) {
this.openMap()
},
openMap: function () {
let that = this;
wx.openLocation({
latitude: this.data.markers[0].latitude,
longitude: this.data.markers[0].longitude,
name: this.data.markers[0].name,
address: this.data.markers[0].address,
})
},
})
.wxss
.shop_info {
.info_item {
display: flex;
align-items: center;
padding: 32rpx 30rpx;
border-bottom: solid 1px #f3f0f3;
i {
font-size: 38rpx;
font-weight: 600;
}
text {
flex: 1;
height: 100%;
margin-left: 12rpx;
font-size: 30rpx;
}
&:first-child {
border-top: solid 1px #f3f0f3;
}
}
}