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

    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();
       

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在高德地图中添加标记点(Marker)可以通过以下步骤实现: 1. 引入高德地图 JavaScript API 在 HTML 文件中引入高德地图 JavaScript API,例如: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> ``` 其中 `key` 值需要替换为您自己申请的高德地图开发者 Key。 2. 创建地图容器 在 HTML 文件中创建一个地图容器,例如: ```html <div id="mapContainer" style="width: 100%; height: 500px;"></div> ``` 该容器的宽度和高度可以根据实际需求进行调整。 3. 创建地图对象 在 JavaScript 中创建地图对象,并将其显示在地图容器中,例如: ```javascript var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13 }); ``` 其中 `center` 表示地图的中心点坐标,`zoom` 表示地图的缩放级别。 4. 添加标记点 通过 `AMap.Marker` 类创建一个标记点对象,并设置其位置、图标等属性,例如: ```javascript var marker = new AMap.Marker({ position: [116.397428, 39.90923], icon: 'https://webapi.amap.com/images/marker_sprite.png' }); ``` 其中 `position` 表示标记点的位置坐标,`icon` 表示标记点的图标。如果不设置图标,则默认使用高德地图提供的红色图钉样式。 5. 将标记点添加到地图中 通过 `AMap.Map` 对象的 `add` 方法将标记点添加到地图中,例如: ```javascript map.add(marker); ``` 完成以上步骤后,您就可以在高德地图中看到一个带有标记点的地图了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值