Markierung auf Google Map API zurückgesetzt v3

Question

Ich habe eine einfache Karte mit benutzerdefinierten PNG-Markierungen erstellt. Ist es möglich, das angehängte PNG-Bild auszugleichen? In der Dokumentation zu Google Map API v3 scheint kein "Offset" erwähnt zu werden.

Answer 1

Die Anker Option auf der MarkerImage-Klasse können Sie den Marker Bild von der Mitte Mittelposition auf der Markierung des lat/lng-Offset:

‚Anker‘ überschreibt die Position des Ankerpunktes von seinem Standard Boden mittlere Position

Answer 2

ich war nur für diese Option suchen und eine Probe hier:
http://econym.org.uk/gmap/custom.htm

Einstellung IconAnchor (auf den Markerdaten tatsächlich) funktionierte für mich.

var Icon = new GIcon(); 
     Icon.image = "mymarker.png"; 
     Icon.iconSize = new GSize(20, 34); 
     Icon.shadow = "myshadow.png"; 
     Icon.shadowSize = new GSize(36, 34); 
     Icon.iconAnchor = new GPoint(5, 34); 
     Icon.infoWindowAnchor = new GPoint(5, 2); 
     Icon.transparent = "mytran.png"; 

Answer 3

Für v3, das ist, wie ich es erreicht:

var image = new google.maps.MarkerImage("images/car1.png", 
    new google.maps.Size(60, 60), 
    new google.maps.Point(0,0), 
    new google.maps.Point(30, 30) 
); 

//ADD MARKER AT EACH POINT 
var marker = new google.maps.Marker(); 
marker.setPosition(new_point); 
marker.setIcon(image); 
marker.setZIndex(0); 
marker.setMap(map); 

Answer 4

Ab v3.10, die MarkerImage Klasse veraltet ist, das Icon anonyme Objekt sollte stattdessen verwendet werden. Von the documentation

Bis Version 3.10 der Google Maps JavaScript-API wurden komplexe Symbole als MarkerImage-Objekte definiert. Das Icon-Objektliteral wurde in Version 3.10 hinzugefügt und ersetzt MarkerImage ab Version 3.11.

Zum Beispiel:

var marker = new google.maps.Marker({ 
    map:map, 
    position: map.getCenter(), 
    icon: { 
    url: place.icon, 
    size: new google.maps.Size(71, 71), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(17, 34), 
    scaledSize: new google.maps.Size(25, 25) 
    } 
}); 

example fiddle

Code-Schnipsel“

function initialize() { 
 
    var mapCanvas = document.getElementById('map'); 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(44.5403, -78.5463), 
 
    zoom: 8, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    var map = new google.maps.Map(mapCanvas, mapOptions) 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: map.getCenter(), 
 
    icon: { 
 
     url: "http://i.stack.imgur.com/PYAIJ.png", 
 
     size: new google.maps.Size(36, 36), 
 
     origin: new google.maps.Point(0, 0), 
 
     anchor: new google.maps.Point(18, 18), 
 
     scaledSize: new google.maps.Size(25, 25) 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>