小程序使用地图导航功能

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容