[英]here map auto zoom to fit all markers
我試圖在我嘗試使用示例https://developer.here.com/documentation/examples/maps-js/markers/zoom-to-set-of-markers的here地圖上顯示所有標記,但示例本身缺失我需要適合屏幕上所有標記的標記也嘗試了這個例子,但不是運氣https://hemaps.github.io/maps-api-for-javascript-examples/custom-zooming-into-bounds/demo.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Zooming Markers</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"/>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<style>
#map {
width: 95%;
height:1050px;
background: grey;
}
#panel {
width: 100%;
height: 800px;
}
</style>
</head>
<body id="markers-on-the-map">
<div id="map"></div>
<script>
window.apikey=""
var markers=[
{lat:41.4822, lng:-81.6697},
{lat:43.7000, lng:-79.4000},
{lat:43.7000, lng:-79.4000},
{lat:40.7127, lng:-74.0059},
{lat:34.042923, lng:-118.101399},
{lat:40.7127, lng:-74.0059},
{lat:57.979073, lng:-105.929508},
{lat:-42.544551, lng:-66.788650},
]
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
// Step 2: initialize a map
var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
center: new H.geo.Point(30.496199, 72.702070),
zoom: 4,
pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var markers_to_zoom=[]
for(var i=0;i<markers.length;i++){
markers_to_zoom.push(new H.map.Marker({lat:markers[i].lat, lng:markers[i].lng}),)
}
var group = new H.map.Group();
group.addObjects(markers_to_zoom);
map.getViewModel().setLookAtData({
bounds: group.getBoundingBox()
});
map.addObject(group);
</script>
</body>
</html>
這是一個縮放功能以適合所有帶有邊距的標記:
function setViewPortPlusMargin(markers,percentageMargin)
{
var bottomLeftLat = null, bottomLeftLng = null;
var topRightLat = null, topRightLng = null;
if(markers[0] != null)
{ //Initialise
bottomLeftLat = markers[0].getGeometry().lat;
topRightLat = bottomLeftLat;
bottomLeftLng = markers[0].getGeometry().lng;
topRightLng = bottomLeftLng;
}
for(i=1; markers[i] != null; i++)
{
if(markers[i].getGeometry().lat < bottomLeftLat)
bottomLeftLat = markers[i].getGeometry().lat;
if(markers[i].getGeometry().lat > topRightLat)
topRightLat = markers[i].getGeometry().lat;
if(markers[i].getGeometry().lng < bottomLeftLng)
bottomLeftLng = markers[i].getGeometry().lng;
if(markers[i].getGeometry().lng > topRightLng)
topRightLng = markers[i].getGeometry().lng;
}
var LatDifference = topRightLat - bottomLeftLat;
var LngDifference = topRightLng - bottomLeftLng;
topRightLat += LatDifference*percentageMargin/200; //Eg if percentage Margin is 10% this adds 5% to the right, because other 5% will go from the left.
bottomLeftLat -= LatDifference*percentageMargin/200;
topRightLng += LngDifference*percentageMargin/200;
bottomLeftLng -= LngDifference*percentageMargin/200;
var bottomLeftMarker = new H.map.Marker({lat:bottomLeftLat, lng:bottomLeftLng});
var topRightMarker = new H.map.Marker({lat:topRightLat, lng:topRightLng});
var viewPortGroup = new H.map.Group();
viewPortGroup.addObjects([bottomLeftMarker, topRightMarker]);
map.getViewModel().setLookAtData({ //Set the window to fit all the markers in
bounds: viewPortGroup.getBoundingBox() });
}
要調用該函數,請使用: setViewPortPlusMargin(WaypointRouteMarkerArray,10);
10 表示 10% 的額外保證金,每邊 5%。 第一個參數是您想要適合視圖的標記數組。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.