问答

高德地图设置缩放级别和中心点无效

作者:admin 2021-04-16 我要评论

H5页面引用高德地图JS API,实现点标记且缩放自适应时,当添加了点标记到地图后,调用相关的API欲设置地图中心点和缩放,都会失效,大致代码如下: var markers ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

H5页面引用高德地图JS API,实现点标记且缩放自适应时,当添加了点标记到地图后,调用相关的API欲设置地图中心点和缩放,都会失效,大致代码如下:

var markers = [];

storeList.forEach(item=> {
    var marker = new AMap.Marker({
        position: item.lnglat,
        icon: '/images/icon_marker.svg',
        title: item.name
    });
 
    markers.push(marker);
});

map.add(markers);
map.setFitView();

if (markers.length === 1) {
    // 当长度为1时代码进到了这里,但是调用setZoomAndCenter设置无效
    map.setZoomAndCenter(16, markers[0].lnglat, true);
}

但是在地图第一次初始化的时候,显示的是想要的效果,点标记能自适应,如下:
image.png
然而在切换城市后(切换城市时我是将地图对象销毁然后重新初始化的),显示的效果就不符合预期了,如下:
image.png
比如当只有一个的时候,应该是要将点标记至于地图中心,且将缩放层级调高才对,但是就像上面代码所示,设置无效。

有没有做过类似需求的,这里想要的效果就是:
点标记能自适应全部显示在地图上,并且层级根据点的分布范围自适应

有没有大佬做过的,急急急,谢谢了~

###

点实例 markers[0].lnglat 是undefined.
可以用 marker.getPosition() 获取经纬度
也可以你的数据:storeList[0].lnglat

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器