微信小程序 map 自动缩放显示所有给定经坐标点设置include-points不生效

最新推荐文章于 2025-02-20 11:14:08 发布

夏目友人帐...

最新推荐文章于 2025-02-20 11:14:08 发布

阅读量1.9k

点赞数 4

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/xiaoyuer_2020/article/details/136370319

版权

文章讲述了在微信小程序中使用地图组件时，遇到include-points属性无法显示完整路线的问题，提供了两种解决方案：主动触发includePoints方法和异步设置。作者强调了在微信开发者工具中可能需要额外处理的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：设置了三个坐标，绘制了线路，需要视野里显示完整路线。但是按照官网给的include-points属性设置，发现无效果。
摘自微信官方文档：
在这里插入图片描述
wxml文件：

<map id="map" class="receive_map" include-points='{{points}}' polyline="{{polyline}}" markers="{{markers}}" ></map>

解决办法一：创建 map 对象，用includePoints方法来主动触发。

onLoad: function () {
        let mapCtx = wx.createMapContext('map');
        const points = [
              {
		        latitude: 35.42,
		        longitude: 119.53
		      }, {
		        latitude: 31.24,
		        longitude: 121.50
		      }, {
		        latitude: 30.74,
		        longitude: 120.74,
		      }
        ]
        var polyline = [{
	      points: points,
	      width: 2
	    }];

        mapCtx.includePoints({
            padding: [20, 20, 20, 20],
            points: points,
        });
    }

如果微信开发者工具还不生效，异步设置includePoints

	onLoad: function () {
        setTimeout(()=>{
	      this.setMap()
	    }, 2000)
    }
    setMap() {
    let mapCtx = wx.createMapContext('map');
        const points = [
              {
		        latitude: 35.42,
		        longitude: 119.53
		      }, {
		        latitude: 31.24,
		        longitude: 121.50
		      }, {
		        latitude: 30.74,
		        longitude: 120.74,
		      }
        ]
        var polyline = [{
	      points: points,
	      width: 2
	    }];

        mapCtx.includePoints({
            padding: [20, 20, 20, 20],
            points: points,
        });
    }