Marker off-set su Google Map API v3

Question

Ho creato una mappa semplice con marcatori PNG personalizzati. È possibile compensare l'immagine PNG allegata? Non sembra esserci alcuna menzione di un 'offset' nella documentazione di Google Map API v3.

Answer 1

L'opzione ancoraggio sulla classe MarkerImage lascia compensato l'immagine Indicatore dalla posizione centrale centrale su del marcatore lat/lng:

'anchor' ignora la posizione del punto di ancoraggio dal suo default fondo posizione centrale

Answer 2

Cercavo solo questa opzione e ha trovato un campione qui:
http://econym.org.uk/gmap/custom.htm

L'impostazione dell'iconaAnchor (sui dati del marker in realtà) ha funzionato per me.

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

Per v3, è così che ho compiuto è:

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

A partire dal v3.10, la classe MarkerImage è stato deprecato, l'oggetto anonimo Icon dovrebbe essere usato al posto. Da the documentation

Fino alla versione 3.10 dell'API JavaScript di Google Maps, le icone complesse erano definite come oggetti MarkerImage. L'oggetto letterale Icon è stato aggiunto nella versione 3.10 e sostituisce MarkerImage dalla versione 3.11 in poi.

Ad esempio:

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

frammento di codice"

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>