zoukankan      html  css  js  c++  java
  • 微信小程序开发常见的拉起外部地图软件进行导航的功能

    <view class="dh" bindtap="mapNavigation" data-addr="{{address}}">
          导航
          <image class="imageD" src="{{pathUrl}}dh.png"></image>
    </view>
    // 引入SDK核心类
    var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js')
    var qqmapsdk;
    
    Component({
      options: {
        multipleSlots: true
      },
      properties: {
      },
      data: {
        pathUrl: 'https://nlwxapp.oss-cn-beijing.aliyuncs.com/nl-club-image/',
        address: '湖北省武汉市光谷软件园F栋'
      },
      onReady: function (res) {
      },
      methods: {
        phoneCall() {
          wx.makePhoneCall({
            phoneNumber: '18971401345'
          })
        },
        mapNavigation(e) {
          // console.log(e)
          console.log(e.target.dataset.addr);
          var addr = e.target.dataset.addr;
          var that = this;
          // 使用 JavaScript SDK 获取目的地经纬度
          // 实例化API核心类
          qqmapsdk = new QQMapWX({
            key: 'TJQBZ-XB333-RGM3W-3Q2DL-7XWV5-DGFQL'
          });
          qqmapsdk.geocoder({
            address: addr,
            success: function (res) {
              console.log(res);
              var local = res.result.location;
              that.setData({
                latitude: local.lat,
                longitude: local.lng
              })
            }
          })
          // 使用微信内置地图查看位置
          wx.getLocation({
            type: 'gcj02', //返回可以用于wx.openLocation的经纬度
            success: function (res) {
              wx.openLocation({
                latitude: that.data.latitude,
                longitude: that.data.longitude,
                scale: 28,
                name: addr, //打开后显示的地址名称
              })
            }
          })
        }
      }
    })
  • 相关阅读:
    全网最贴心webpack系列教程和配套代码
    webpack4 系列教程(十五):开发模式与webpack-dev-server
    CSS元素显示模式
    CSS符合选择器
    Emmet语法
    CSS引入方式
    CSS文本属性
    CSS字体属性
    CSS语法规范一
    案例
  • 原文地址:https://www.cnblogs.com/wanf/p/10830438.html
Copyright © 2011-2022 走看看