小程序使用地图导航功能

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

    },

    )

  },

``

图片1 图片2
图片3