Google map marker sprite-position

Wie können wir die position des sprite-Bild als Google-map-marker. ZB: In css positionieren wir uns das Bild, wie

background: url('../images/bodycss/pointer.png') 28px -32px;

Nun, wie kann ich den oben genannten code, um die unter google-api-v3 Funktion ?

function setMarkers(map, markers) {

    var google_image = new google.maps.MarkerImage("http://example.com/images/bodycss/pointer.png");

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4],
            icon: google_image
        });

        google.maps.event.addListener(marker, "mouseover", function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }
}

InformationsquelleAutor FR STAR | 2012-12-09

20

Erstellen MarkerImage von einem sprite-image, die Sie benötigen, um den Ursprung festzulegen und die Größe der Abschnitt des Bildes, das Sie verwenden möchten, erstellen Sie das Symbol.
```
var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34));
```
Können Sie einen Blick auf diese Blog-post, das beschreibt es gut

Update- Siehe diesen arbeiten Fiddle- DEMO

Habe ich dieses Bild- http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4 und angepasst, die Größe und die Punkt-Werte für das Symbol.
- Ich habe versucht den code und rot blog-post, die Sie gegeben haben. Aber leider ist es nicht angezeigt, der marker. Der code, den ich versucht habe, ist var icon = new google.maps.MarkerImage("mydomain.com/images/bodycss/pointer.png", new google.maps.Größe(32, 32), new google.maps.Punkt(28, 32)); Könnten Sie mir bitte sagen, was ist daran falsch ?
- Siehe das update für ein funktionierendes fiddle
- Ein Großes Dankeschön für das zeigen der Interesse an diesem. Aber noch funktioniert es nicht, weil ich habe aktualisiert Ihre Geige Skript mit meinem sprite-image-Werten funktioniert es nicht. Siehe meine fiddle-Beispiel jsfiddle.net/frm683/uXL7H.
- Das gleiche sehen fiddle jetzt- jsfiddle.net/uXL7H/1. Wie ich Ihnen sagte, Sie sind nicht die Anpassung der point-und size-Werte korrekt. Hoffe Sie verstehen es jetzt. Auch ich antwortete Ihrer vorherigen Frage sehen, ob ich richtig war und Sie akzeptiert beides.
- Vielen Dank mac. Du bist der Mann. FYI : ich habe akzeptiert Ihre Antwort.
- Sie sollten erwägen, Diese Frage ist Antwort zu.
- tut mir Leid, dass ich einfach akzeptiert, dass auch die Antwort darauf auch sehr gelohnt.
- diese Lösung funktioniert nicht in safari. Irgendeine Idee dazu?
- diese Lösung funktioniert nicht in safari. Irgendeine Idee dazu?
InformationsquelleAutor Cdeez
4

Bevor die MarkerImage Klasse wurde als veraltet markiert (was bedeutet, es ist zwar noch unterstützt, sollte aber ersetzt werden) zugunsten der Icon-Objekt, haben Sie vielleicht etwas geschrieben, wie dies für ein einfaches Bild:
```
var qthIconHouse20 = new google.maps.MarkerImage( 'grafx/house_icon_20.png',
                                    new google.maps.Size(20, 20),
                                    new google.maps.Point(0, 0),
                                    new google.maps.Point(10, 10) );
```
Nun, mit dem Symbol Objekt, das Sie schreiben würde:
```
var qthIconHouse20 = {  
  url:        'grafx/house_icon_20.png',
  size:       new google.maps.Size(20, 20),
  origin:     new google.maps.Point(0, 0),
  anchor:     new google.maps.Point(10, 10),
  scaledSize: new google.maps.Size(20, 20)
};
```
Beachten Sie die zusätzlichen scaledSize parameter: für einfache Bilder, das ist die Größe des ursprünglichen Bildes - in diesem speziellen Fall ist die gleiche wie die Größe der parameter.

Für sprites, wo Sie mehrere Bilder in einem einzigen Bild-Datei, die Sie verwenden könnte, so etwas wie dieses:
```
var qthIconBlueSpot16 = {
  url:        'grafx/qth_icon_spots_16.png',
  size:       new google.maps.Size(16, 16),
  origin:     new google.maps.Point(0, 32),
  anchor:     new google.maps.Point(8, 8),
  scaledSize: new google.maps.Size(16, 48)
};
```
Beachten Sie, dass in diesem Beispiel die Herkunft angegeben wurde als (0, 32) in einem sprite mit mehreren 16*16-pixel-Bilder: so hier sind wir der Auswahl der Dritten Bild im sprite. In dem Teil des Bildes, setzen wir den Anker (8, 8), d.h. in der Mitte des ausgewählten Teil des Bilds angezeigt werden. Endlich, die scaledSize bezieht sich hier auf die Größe der gesamte sprite.

InformationsquelleAutor Rob Banmeadows
1

Können Sie die anchor Eigenschaft eines MarkerImage die, wie dokumentiert hier überschreibt die Standard-position:

Die position, an der zum Anker ein Bild in Verbindung, um die Lage der marker auf der Karte. Standardmäßig wird der Anker liegt an dem Mittelpunkt der Unterkante des Bildes.

p.s. MarkerImage ist veraltet, und Sie sollten überlegen, Symbol statt.
- Danke für deine schnelle Antwort. Ich habe versucht den folgenden code, aber es funktioniert nicht. var google_image = new google.maps.MarkerImage("mydomain.com/images/bodycss/pointer.png", new google.maps.Größe(32, 32), new google.maps.Punkt(28, 32)); Und da MarkerImage veraltet ich konnte nicht verstehen, wie man mit diesem Symbol. Könnten Sie mir bitte ein Beispiel für meine Anforderung? Eigentlich ist mein sprite-Bild-Größe sollte sein height: 32px; width:32px-und Image-Pfad und-Positionen werden wie folgt background: url('../images/bodycss/Zeiger.png') 28px -32px;
InformationsquelleAutor kieran

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.