Google Maps Retina Marker mit Label-

Question

ich Google Maps mit diesem Code für Retina am Umgang:

var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(lat, lon), 
       title: title, 
       map: map, 
       id: id, 
       icon: { 
        url: "http://maps.google.com/mapfiles/kml/paddle/orange-blank.png", 
        size: new google.maps.Size(64, 64), 
        scaledSize: new google.maps.Size(40, 40), 
        origin: new google.maps.Point(0, 0), 
        anchor: new google.maps.Point(0, 0) 
       }, 
       label: level + "" 
      }); 

Es funktioniert, dass das Icon selbst skaliert wird, dass es auf Retina-Display scharf ist. Aber wie Sie auf diesem Bild sehen können, ist das Label nicht mehr in der Mitte des Markers. Wie geht das? Ich habe es bereits mit Herkunft versucht und ohne Erfolg verankert. (Die rote Markierung ist original Marker google leider Google nicht eine Methode, um die Farbe der Standardmarkierung zu ändern oder gibt es etw zur Verfügung?)

Answer 1

• Das Symbol „http://maps.google.com/mapfiles/kml/paddle/orange-blank.png“ ist 64px x 64px.

• Es skaliert wird auf 40px x 40px.
• Die anchor sollte bei [20,40] (20 Pixel rechts, in der Mitte, 40 Pixel unten von der oberen linken Ecke des skalierten Bildes, am unteren Rand) sein.
• Die labelAnchor sollte bei [20, 12] sein (20 Pixel rechts, in der Mitte, 12 Pixel unten von oben).

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat, lon), 
    title: title, 
    map: map, 
    id: id, 
    icon: { 
    url: "http://maps.google.com/mapfiles/kml/paddle/orange-blank.png", 
    size: new google.maps.Size(64, 64), 
    scaledSize: new google.maps.Size(40, 40), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(20, 40), 
    labelOrigin: new google.maps.Point(20,12) 
    }, 
    label: level + "" 
}); 

• Wenn Sie ein Infofenster auf einem kundenspezifischen Marker zu öffnen, müssen Sie auch die Option anchorPoint der Markierung setzen.

Code-Schnipsel:

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var title = "title"; 
 
    var id = "id"; 
 
    var level = 2; 
 
    var lat = map.getCenter().lat(); 
 
    var lon = map.getCenter().lng(); 
 
    var marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(lat, lon), 
 
    title: title, 
 
    map: map, 
 
    id: id, 
 
    icon: { 
 
     url: "http://maps.google.com/mapfiles/kml/paddle/orange-blank.png", 
 
     size: new google.maps.Size(64, 64), 
 
     scaledSize: new google.maps.Size(40, 40), 
 
     origin: new google.maps.Point(0, 0), 
 
     anchor: new google.maps.Point(20, 40), 
 
     labelOrigin: new google.maps.Point(20, 12) 
 
    }, 
 
    label: level + "", 
 
    anchorPoint: new google.maps.Point(0, -40) 
 
    }); 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    infowindow.setContent(marker.getPosition().toUrlValue(6)); 
 
    infowindow.open(map, marker); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

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

Answer 2

Fest mit:

icon: { 
      url: "http://maps.google.com/mapfiles/kml/paddle/red-blank.png", 
      size: new google.maps.Size(32, 42), 
      scaledSize: new google.maps.Size(32, 32), 
      origin: new google.maps.Point(0, -10), 
      anchor: new google.maps.Point(16, 42) 
} 

Und für die anderen mit, dass die Bilder dort viele Farben sind nur versuchen ...