Làm cách nào để thay đổi chiều cao biểu tượng & chiều rộng dựa trên mức thu phóng của Google Maps?Thay đổi biểu tượng dựa trên mức thu phóng
Tôi đang sử dụng api v3 của Google Maps.
Làm cách nào để thay đổi chiều cao biểu tượng & chiều rộng dựa trên mức thu phóng của Google Maps?Thay đổi biểu tượng dựa trên mức thu phóng
Tôi đang sử dụng api v3 của Google Maps.
Bạn sẽ có thể thêm người nghe vào thay đổi thu phóng trên mỗi the docs. Nó không nhận được thông qua bất cứ điều gì, nhưng bạn có thể nhận được tài sản thông qua api.
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();
//this is where you will do your icon height and width change.
});
nhưng, làm cách nào để thay đổi chiều rộng và chiều cao của biểu tượng? – CamelCamelCamel
bạn đang cố thay đổi biểu tượng nào? –
tôi có rất nhiều điểm đánh dấu trong một mảng. – CamelCamelCamel
Đây là mã tôi đã sử dụng cuối cùng:
google.maps.event.addListener(google_map, 'zoom_changed', function() {
var z = google_map.getZoom();
_.each(map_shapes, function(s) {
if (! $.isFunction(s.shape.getPosition)) return;
var w = s.shape.getIcon().size.width;
var h = s.shape.getIcon().size.height;
s.shape.setIcon(new google.maps.MarkerImage(
s.shape.getIcon().url, null, null, null, new google.maps.Size(
w - Math.round(w/3 * (last_zoom - z)),
h - Math.round(h/3 * (last_zoom - z)))
)
);
});
last_zoom = z;
});
chỉ là một lưu ý, đảm bảo chiều rộng và chiều cao mới của bạn không dưới 0, nếu không bạn sẽ gặp phải một số lỗi javascript khó chịu :) luôn đảm bảo chiều rộng và chiều cao của biểu tượng ít nhất là 1 – Radek
Câu trả lời này phải được chấp nhận. – Andrey
Hiện tại, 'MarkerImage' chỉ là 'Biểu tượng' kể từ Google Maps API 3.11. Coole là bạn đã đặt tên các trường của đối tượng, ví dụ: 'scaledSize'. Xem: https://developers.google.com/maps/documentation/javascript/markers#complex_icons – andi
Mã này sẽ thay đổi kích thước của biểu tượng mỗi khi thay đổi mức độ phóng nên biểu tượng là kích thước địa lý tương tự.
//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
)
);
});
bằng cách nào đó xử lý một số sự kiện onzoom và sau đó chỉ cần thay đổi biểu tượng? Dunno, không làm việc với v3 ... – TMS