ändern Sie google map marker Farbe, um eine Farbe meiner Wahl

Ist es sowieso zu ändern, die Standard-red marker-Farbe in einem hexadezimalen Farbe meiner Wahl? Ich habe auf der Suche alle über stack overflow und ich habe nicht scheinen, eine Antwort zu finden. Dies ist, was ich habe, so weit.

var marker = new google.maps.Marker({
            position: myLatLng,
            label: '23',
            map: map
        });
InformationsquelleAutor beewuu | 2016-10-27



2 Replies
  1. 0

    den marker nicht über eine color-Eigenschaft/Attribut .. die Marker verwenden-Symbol, so können Sie ändern Farbe ändern-Symbol

    dies ist aus google-maps dev

    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
    var beachMarker = new google.maps.Marker({
       position: {lat: -33.890, lng: 151.274},
       map: map,
       icon: image
     });
    • gibt es eine google-Karte-Symbol-website, die ich durchsehen können? Ich brauche keine fancy-Symbol, nur das gleiche Symbol, google hat aber einen anderen hintergrund-Farbe
    • werfen Sie einen Blick auf diese SO stackoverflow.com/questions/8248077/… oder Sie können die Suche auf Seiten wie diesen miftyisbored.com/…
    • die Sache ist, dass die icon-Farben, die Sie haben, sehr allgemein sein, wie ‚blau‘, ‚grün‘ etc. ist. Ich habe eine konkrete hexadezimale Farbcode möchte ich die marker zu haben
    • Sie können bauen eine Ikone wie Sie bevorzugen ..ist eine normale png. speichern Sie es in einem zugänglichen Website-Bereich und laden Sie dann mit der Probe und verwenden ..
  2. 4

    Wäre eine option zu definieren, ist ein SVG-symbol für das marker-Symbol. SVG-icon-Farben eingestellt werden können, die in Ihrem Konstruktor.

    function pinSymbol(color) {
        return {
            path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
            fillColor: color,
            fillOpacity: 1,
            strokeColor: '#000',
            strokeWeight: 2,
            scale: 1
        };
    }

    Dann verwenden Sie es wie diese:

    var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(47.5, -122.0),
      icon: pinSymbol('green')
    });

    ändern Sie google map marker Farbe, um eine Farbe meiner Wahl

    proof-of-concept-fiddle

    code-snippet:

    JS:

    function initialize() {
      var latlng = new google.maps.LatLng(47.605, -122.2);
      var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
      var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: pinSymbol('red')
      });
    
      var marker1 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(47.5, -122.0),
        icon: pinSymbol('#7CFC00')
      });
      var marker2 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(47.6, -122.3),
        icon: pinSymbol('orange')
      });
      var marker3 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(47.7, -122.1),
        icon: pinSymbol('yellow')
      });
    }
    
    function pinSymbol(color) {
      return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
      };
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);

    CSS:

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

    HTML:

    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.