微信小程序中使用腾讯地图,导航到目的地

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_39378691/article/details/85067600
1.效果图如下:(点击地图可导航,从用户当前位置到目的地)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. wxml文件中
(1)目标地址location

在这里插入图片描述

<!-- 地址 -->
<view class='loc'>
  <view>
    <text class='iconfont icon-location'></text>
  </view>
  <view class='location'>{{location}}</view>
</view>
(2)地图map

在这里插入图片描述

<!-- 地图 -->
<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>
3. js文件中
(1)前提是已经申请了腾讯地图的密钥,下载js放在utils文件中,在js文件中引入

在这里插入图片描述

var app = getApp();
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
// 实例化API核心类
var qqmapsdk;
(2)页面的初始数据,包括地址location,纬度latitude,经度longitude和图标定位markers

在这里插入图片描述

Page({
  data: {
    phone: "",
    location: "",
    latitude: "",
    longitude: "",
    // 图标定位
    markers: [],
  },
(3)wx.request请求后台数据,包括location,latitude,longitude,返回的经纬度也赋给markers数组(定位图标所需)

在这里插入图片描述
在这里插入图片描述

// 数据加载
  onLoad: function (options) {
    var that = this;
    // 发送请求,GET
    // 成功后台返回location,latitude,longitude
    wx.request({
      url: 'https://XXXXXX?userId=' + app.id,
      method: 'GET',
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      success: function (res) {
        that.setData({
          // 地址+经纬度
          location: res.data.data.address,
          latitude: res.data.data.lat,
          longitude: res.data.data.lng,
          // 电话
          phone: res.data.data.phone,
          // 定位标志的经纬度
          markers: [{
            latitude: res.data.data.lat,
            longitude: res.data.data.lng,
          }]
        });
      },
      fail: function (res) {
        console.log('失败了');
      }
    });
  },
(4)点击地图,先调用wx.getLocation获取当前用户的经纬度(导航所需),成功之后,再调用wx.openLocation打开地图

在这里插入图片描述

// 地图
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  },
// 地图导航
  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: 18,   // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: 'http://www.gongjuji.net'  // 在查看位置界面底部显示的超链接,可点击跳转(测试好像不可用)
        });
      },
      cancel: function (res) {
        console.log('地图定位失败');
      }
    })
  },

希望对你有帮助,若有疑问可留言讨论,谢谢~

没有更多推荐了,返回首页