微信小程序跳到第三方地图

初始化

// 引入SDK核心类
// var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
// // 实例化API核心类
// var qqmapsdk;

Page({
  data: {
    phone: "",
    location: "",
    latitude: "",
    longitude: "",
    // 图标定位
    markers: [],
  },

  // 地图导航
  getLoc: function (e) {
    // console.log(e.currentTarget.id);  // 获取当前点击的数组下标
    var that = this;
    wx.getLocation({
      type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
      success: function (res) {
        //使用微信内置地图查看位置接口
        wx.openLocation({
          latitude: parseFloat(that.data.latitude),  // 要去的地址经度，浮点数
          longitude: parseFloat(that.data.longitude),  // 要去的地址纬度，浮点数
          name: '终点位置',  // 位置名
          address: that.data.location,  // 要去的地址详情说明
          scale: 1,   // 地图缩放级别,整形值,范围从1~28。默认为最大
          //infoUrl: 'http://www.gongjuji.net'  // 在查看位置界面底部显示的超链接,可点击跳转（测试好像不可用）
        });
      },
      cancel: function (res) {
        console.log('地图定位失败');
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
// 数据加载
onLoad: function (options) {
  // 实例化API核心类
  //    qqmapsdk = new QQMapWX({
  //     key: 'WZZBZ-ITWKP-NKSDH-VM7KF-UASIK-CABJB'
  // });
  this.setData({
    // 地址+经纬度
    location: '宝安',
    latitude: '22.6520139',
    longitude: '113.7908217',
    // 电话
    phone: 13265472403,
    // 定位标志的经纬度
    markers: [{
      latitude: '22.6520139',
      longitude: '113.7908217',
    }]
  });
},


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
// 地图
onReady: function (e) {
  this.mapCtx = wx.createMapContext('myMap')
},


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

// 地图的大小

.maps{
  height: 400rpx;
}
.page-section{
  height: 400rpx;
}
 .page-section-gap{
  height: 400rpx;
}

// view

<!-- 地址 -->
<view class='loc'>
  <view>
    <text class='iconfont icon-location'></text>
  </view>
  <view class='location'>{{location}}</view>
</view>
<!-- 地图 -->
<view class='maps'>
  <view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: 100%; border-radius: 20px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      bindtap="getLoc"
      show-location
    ></map>
  </view>
</view>