gpt4 book ai didi

google-maps-api-3 - 根据缩放 Google map v3 调整标记大小

转载 作者:行者123 更新时间:2023-12-03 15:10:54 29 4
gpt4 key购买 nike

我有一个在 v3 API 上运行的谷歌地图,我添加了一些自定义标记,是否可以根据 map 的缩放级别使它们缩放?
我尝试搜索引用,但似乎找不到任何调整 MarkerImage 大小的方法。
也许我必须删除 map 更改缩放的所有标记并创建不同大小的新标记?

最佳答案

每次缩放 map 时,此代码都会调整大小,因此它始终覆盖相同的地理区域。

//create a marker image with the path to your graphic and the size of your graphic
var markerImage = new google.maps.MarkerImage(
'myIcon.png',
new google.maps.Size(8,8), //size
null, //origin
null, //anchor
new google.maps.Size(8,8) //scale
);

var marker = new google.maps.Marker({
position: new google.maps.LatLng(38, -98),
map: map,
icon: markerImage //set the markers icon to the MarkerImage
});

//when the map zoom changes, resize the icon based on the zoom level so the marker covers the same geographic area
google.maps.event.addListener(map, 'zoom_changed', function() {

var pixelSizeAtZoom0 = 8; //the size of the icon at zoom level 0
var maxPixelSize = 350; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels

var zoom = map.getZoom();
var relativePixelSize = Math.round(pixelSizeAtZoom0*Math.pow(2,zoom)); // use 2 to the power of current zoom to calculate relative pixel size. Base of exponent is 2 because relative size should double every time you zoom in

if(relativePixelSize > maxPixelSize) //restrict the maximum size of the icon
relativePixelSize = maxPixelSize;

//change the size of the icon
marker.setIcon(
new google.maps.MarkerImage(
marker.getIcon().url, //marker's same icon graphic
null,//size
null,//origin
null, //anchor
new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale
)
);
});

关于google-maps-api-3 - 根据缩放 Google map v3 调整标记大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3281524/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com