v3 API에서 Google지도를 실행하고 일부 맞춤 마커를 추가했습니다.지도의 확대/축소 수준에 따라 축척을 조정할 수 있습니까? 참고 문헌을 검색하려고 시도했지만 MarkerImage의 크기를 조정하는 방법을 찾지 못하는 것 같습니다.확대/축소에 따라 마커 크기 조정 Google지도 v3
어쩌면지도가 변경된 모든 것을 마커에서 지우고 다른 크기로 새로운 마커를 만들어야합니까?
v3 API에서 Google지도를 실행하고 일부 맞춤 마커를 추가했습니다.지도의 확대/축소 수준에 따라 축척을 조정할 수 있습니까? 참고 문헌을 검색하려고 시도했지만 MarkerImage의 크기를 조정하는 방법을 찾지 못하는 것 같습니다.확대/축소에 따라 마커 크기 조정 Google지도 v3
어쩌면지도가 변경된 모든 것을 마커에서 지우고 다른 크기로 새로운 마커를 만들어야합니까?
불행히도, 매번 아이 콘을 설정해야합니다. 그러나 미리 정의한 다음 마커에 적용 할 수 있습니다.
zoomIcons = [null, icon1, icon2]; // No such thing as zoom level 0. A global variable or define within object.
marker.setIcon(zoomIcons[map.getZoom()]);
이 코드는 맵이 확대 될 때마다 크기가 조정되어 항상 동일한 지리적 영역을 포함합니다.
//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
)
);
});
당신은 또한 같은 대한 zoom_changed 이벤트에이를 연결할 수
고맙습니다. 또한 지리적 부분을 포함하도록 확장하는 추가 단계를 좋아합니다. 그러나 나를 위해 마커는 상징적 인 것이므로 map.getZoom()에서 비교 조건을 사용하여 적절하게 크기를 조정했습니다. – efwjames
코드 주셔서 감사합니다. MarkerImage는 더 이상 사용되지 않고 제거되었습니다. 지금 사용 -> https://developers.google.com/maps/documentation/javascript/markers#convertingtoicon –
: google.maps.event.addListener (지도, "ZOOM_CHANGED"함수() {var에 줌 = map.getZoom(); // 할 현재 줌에 따라 뭔가}}; – Dr1Ku