高德地图自适应展示所有Marker

最新推荐文章于 2022-08-16 18:04:43 发布

好菜的程序媛

最新推荐文章于 2022-08-16 18:04:43 发布

阅读量3.6k

点赞数 1

分类专栏：高德地图

本文链接：https://blog.csdn.net/Gomeer/article/details/102861746

版权

高德地图专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用高德地图API创建并自适应调整地图中心点，确保所有标记点可见。通过实例展示了如何在地图上添加多个带有图标标记的位置，并调整地图视野，使所有标记点均在视图内。

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

    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });

    map.clearMap();  // 清除地图覆盖物

    var markers = [{
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
        position: [116.205467, 39.907761]
    }, {
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
        position: [116.368904, 39.913423]
    }, {
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
        position: [116.305467, 39.807761]
    }];

    // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
    markers.forEach(function(marker) {
        new AMap.Marker({
            map: map,
            icon: marker.icon,
            position: [marker.position[0], marker.position[1]],
            offset: new AMap.Pixel(-13, -30)
        });
    });

//自适应中心点、展示所有标记点--核心代码
   var newCenter = map.setFitView();
   newCenter.getCenter();