微信小程序-腾讯地图绘制线路图之地图缩放比例自适应问题

问题描述:最近在做微信小程序项目,根据业务需求需要绘制起点到终点的线路图, 但是不论起点和终点的距离有多远都需要将起点和终点 在地图的可视区域内显示,针对这个问题,我采取了以下解决方案,效果图如下所示

xml:

 <view class="container">
 <view>
    <map id="myMap" style="width: 100%; height: {{height}}rpx;"   markers="{{markers}}" include-points='{{points}}'  polyline="{{polyline}}" ></map>
  </view>
</view>

js:

const app = getApp()
var QQMapWX = require('../../../../utils/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
  key: '填写自己的key' // 必填
});
Page({
  data: {
    height: 568,
    markers: [],
    polyline: [],
    result:[],
    points:[]
  },
  getHeight: function () {
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        let clientHeight = res.windowHeight;
        let clientWidth = res.windowWidth;
        let ratio = 750 / clientWidth;
        let height = clientHeight * ratio;
        that.setData({
          height: height
        });
      }
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this
    that.getHeight();
    var start = JSON.parse(options.start).lat +","+ JSON.parse(options.start).lng
    var end = JSON.parse(options.end).lat + "," + JSON.parse(options.end).lng
    that.line(start,end);
    var marker = [
      {
      iconPath: "../../../../images/start.png",
      id: 0,
      latitude: JSON.parse(options.start).lat,
      longitude: JSON.parse(options.start).lng,
      width: 23,
      height: 33
     },
      {
        iconPath: "../../../../images/end.png",
        id: 0,
        latitude: JSON.parse(options.end).lat,
        longitude: JSON.parse(options.end).lng,
        width: 24,
        height: 34
      }]
      var points_=[
        {
          latitude: JSON.parse(options.start).lat,
          longitude: JSON.parse(options.start).lng,
        },
        {
          latitude: JSON.parse(options.end).lat,
          longitude: JSON.parse(options.end).lng,
        }
      ]
      that.setData({
        markers: marker,
        points:points_,
      })
  },
  onReady: function () {
   this.mapCtx = wx.createMapContext('myMap');
  },
  line: function (start,end) {
    var _this = this
    qqmapsdk.direction({
      mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
      from: start,
      to: end,
      success: function (res,data) {
        console.log(res);
        var ret = res;
        var coors = ret.result.routes[0].polyline, pl = [];
        //坐标解压(返回的点串坐标,通过前向差分进行压缩)
        var kr = 1000000;
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        console.log(pl)
        //设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
        _this.setData({
          latitude: pl[0].latitude,
          longitude: pl[0].longitude,
          polyline: [{
            points: pl,
            color: "#37C4FF",
             width: 4, 
             dottedLine: false
          }]
        })
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },
})

  

  • 总结:
  •   1不给map添加 longitude 和 latitude属性
  •  2.添加属性include-points='{{points}}',points中将起点和终点包括在其中。
  • 3.不设置scale

 

  • 3
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序可以通过调用腾讯地图API实现一些地图相关的功能。首先,在小程序开发过程中,需要先在微信公众平台申请开通腾讯地图API的权限。然后,开发者可以使用小程序的开发工具,在相关的页面中引入腾讯地图API的SDK。 在小程序中调用腾讯地图API可以实现一些功能,如地图显示、定位、搜索、导航等。开发者可以在小程序中创建一个地图容器,通过调用腾讯地图API的相关方法,将地图显示在小程序中的指定位置上。用户可以通过手势操作地图进行缩放、平移等操作。 同时,通过腾讯地图API的定位功能,小程序可以获取用户的地理位置信息。开发者可以在小程序中调用相关接口,实现用户位置的定位和显示。此外,小程序还可以通过调用腾讯地图API的搜索功能,实现地点、位置、路线的搜索。用户可以通过输入关键词,获取相关的地点信息,并在地图上显示。 另外,小程序还可以调用腾讯地图API的导航功能,实现路线规划和导航功能。用户可以通过输入起始点和终点,获取最佳的交通路线,并在地图上显示导航路线。开发者可以通过调用腾讯地图API提供的导航接口,实现小程序的导航功能。 总之,微信小程序可以通过调用腾讯地图API实现地图显示、定位、搜索和导航等功能,为用户提供更好的地理信息服务。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值