1/需求:图片1的位置是可以点击,并且点击后出现图片2页面,点击图片2去哪里(需要真机调试),出现图片3效果,调用手机导航app,实现导航功能
2/代码实现
2.1:wxml (把地图组件定位在这行字上面,然后透明度设为0(opacity:0;),这样子点击这个地址的时候就会跳转到地图导航页面。)
```
<view bindtap="toMap" data-info="{{hotel_info}}">
<view class="contact_hotel_addr">
<text class='icon-location contact_hotel_icon'></text>
{{merchant_info.address}}</view>
<map id="map" longitude="{{hotel_info.latitude}}" latitude="{{hotel_info.longitude}}" style="width: 100%; height: 100%;opacity:0;"></map>
</view>
```
2.2: js
// 点击地图(需要跳转过去的地址信息,通过data-info传过来)
```
toMap: function (e) {
console.log(e.currentTarget.dataset.info, 'toMap')
var info = e.currentTarget.dataset.info
wx.openLocation({
latitude: info.longitude,
longitude: info.latitude,
scale: 18,
name: info.hotel_name,
address: info.address
},
)
},
``