2017-01-14 6 views
0

ich ein Google Maps Marker wollen auf einem bestimmten Zoomstufe auf einer festen Größe zu sein, wie in diesem Beispiel: http://jsfiddle.net/bryan_weaver/4rxqQ/Prevent Marker von Skalierung, wenn Auszoomen

function initialize() { 
var map; 
var centerPosition = new google.maps.LatLng(38.713107, -90.42984); 
var options = { 
    zoom: 9, 
    center: centerPosition, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map($('#map')[0], options); 

var icon = 'https://www.google.com/mapfiles/marker_black.png'; 
var iconBounds = constructBounds(38.713107, -90.42984); 
var staticOverlay = new google.maps.GroundOverlay(icon, iconBounds); 
staticOverlay.setMap(map); 
} 

function constructBounds(lat, lng){ 
var sw = new google.maps.LatLng(lat - .03, lng - .025) 
var ne = new google.maps.LatLng(lat + .03, lng + .025) 
return new google.maps.LatLngBounds(sw, ne); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Aber ist es eine glatte Lösung als in über Jsfiddle?

+0

Was ist nicht "glatt" in der oben genannten? Und was ist deine Definition von "glatt"? – MrUpsidown

+0

@MrUpsidown Ich dachte, es wäre möglich, wie zum Beispiel eine Option in neuen google.maps.Marker. – Kristoffer

Antwort

2

Basierend auf Ihrem Kommentar: Ja, Sie können es mit einem Marker lösen, aber es gibt keine "ready-to-use" -Option in den MarkerOptions. Stattdessen können Sie einen Listener für Zoomänderungen hinzufügen und eine neue Skalierung für das Markersymbol festlegen. Anstelle der Ground

var icon = 'https://www.google.com/mapfiles/marker_black.png'; 
var iconBounds = constructBounds(38.713107, -90.42984); 
var staticOverlay = new google.maps.GroundOverlay(icon, iconBounds); 
staticOverlay.setMap(map); 

Sie einen Marker

var icon = 'https://www.google.com/mapfiles/marker_black.png'; 
var marker = new google.maps.Marker({ 
    position: { 
     lat: 38.713107, 
     lng: -90.42984 
    }, 
    map: map, 
    icon: icon 
}); 

Dann Zuhörers Sie fügen Sie einfach den Zoom-Änderung verwenden würde und berechnen eine neue Größe auf der Basis der Zoomstufe:

//add a zoom change listener, so you can resize the icon based on the zoom level 
google.maps.event.addListener(map, 'zoom_changed', function() { 

    var zoom = map.getZoom(); 
    markerWidth = (zoom/9)*20 
    markerHeight = (zoom/9)*34 

    //set the icon with the new size to the marker 
    marker.setIcon({ 
     url: icon, 
     scaledSize: new google.maps.Size(markerWidth, markerHeight) 
    }); 
}); 

Of Natürlich können Sie die Berechnung ändern, so dass sich die Symbolgröße auf andere Weise ändert. Ich habe gerade ein schnelles Beispiel erstellt. Ich habe gerade aktualisiert your fiddle.

+0

Vielen Dank! Funktioniert perfekt! – Kristoffer

+1

Die 'MarkerImage' Klasse wurde vor einer ** langen ** Zeit (nach v3.10) zugunsten des anonymen Objekts 'Icon' veraltet. – geocodezip

+0

Sie haben Recht. Ich habe gerade die veraltete "MarkerImage" -Klasse auf "Icon" aktualisiert. – mxlse

Verwandte Themen