高德地圖自適應顯示多個點標記
阿新 • • 發佈：2021-06-23
高德地圖自適應顯示多個點標記
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>自適應顯示多個點標記</title> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> <style> html, body, #container { height: 100%; width: 100%; } .amap-icon img{ width: 25px; height: 34px; } </style> </head> <body> <div id="container"></div> <div class="input-card"> <h4>地圖自適應</h4> <input id="setFitView" type="button" class="btn" value="地圖自適應顯示" /> </div> <div class="info"> <div id="centerCoord"></div> <divid="tips"></div> </div> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script> <script type="text/javascript"> 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 center = map.getCenter(); var centerText = '當前中心點座標：' + center.getLng() + ',' + center.getLat(); document.getElementById('centerCoord').innerHTML = centerText; document.getElementById('tips').innerHTML = '成功新增三個點標記，其中有兩個在當前地圖視野外！'; // 新增事件監聽, 使地圖自適應顯示到合適的範圍 AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function() { var newCenter = map.setFitView(); document.getElementById('centerCoord').innerHTML = '當前中心點座標：' + newCenter.getCenter(); document.getElementById('tips').innerHTML = '通過setFitView，地圖自適應顯示到合適的範圍內,點標記已全部顯示在視野中！'; }); </script> </body> </html>