API GoogleMaps 3 - colorimètre personnalisé pour marqueur par défaut (dot)

j'ai vu beaucoup d'autres questions similaires à celle-ci ( ici , ici et ici ), mais ils ont tous accepté des réponses qui ne résolvent pas mon problème. La meilleure solution que j'ai trouvée au problème est la bibliothèque StyledMarker , qui vous permet de définir des couleurs personnalisées pour les marqueurs, mais je ne peux pas l'obtenir pour utiliser le marqueur par défaut (celui que vous obtenez lorsque vous faites une recherche Google maps - avec un point dans le milieu), il semble juste de fournir des marqueurs avec une lettre, ou avec une icône spéciale.

253
demandé sur Community 2011-08-17 19:39:21

15 réponses

vous pouvez demander dynamiquement des images d'icône de la api cartes de Google avec les urls:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

qui ressemble à ceci: default color l'image est 21x34 pixels et la pointe de la broche est à la position (10, 34)

et vous voulez aussi une image d'ombre séparée (de sorte qu'elle ne chevauche pas les icônes à proximité):

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

Qui ressemble à ceci: enter image description here l'image est 40x37 pixels et la pointe de la broche est à la position (12, 35)

lorsque vous construisez votre MarkerImage vous devez régler la taille et les points d'ancrage en conséquence:

    var pinColor = "FE7569";
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));

vous pouvez alors ajouter le marqueur à votre carte avec:

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

remplacer simplement "FE7569" par le code de couleur vous êtes après. Par exemple: default color green yellow

crédit dû à Jack B Agile for the inspiration;)

503
répondu matt burns 2017-05-23 12:34:37

si vous utilisez Google Maps API v3, vous pouvez utiliser setIcon e.g.

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

ou en tant que partie du marqueur init:

marker = new google.maps.Marker({
    icon: 'http://...'
});

autres couleurs:

utilisez le morceau de code suivant pour mettre à jour les marqueurs par défaut avec des couleurs différentes.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
348
répondu Mike 2016-03-15 19:22:03

Voici une bonne solution en utilisant L'API Gooogle Maps elle-même. Pas de service extérieur, Pas de bibliothèque supplémentaire. Et il permet des formes personnalisées et de multiples couleurs et styles. La solution utilise des marqueurs vectoriels, que googlemaps api appelle symboles .

outre les quelques symboles prédéfinis limités, vous pouvez créer n'importe quelle forme de n'importe quelle couleur en spécifiant une chaîne SVG path ( Spec ).

Pour l'utiliser, à la place lorsque vous définissez l'option "icône" marqueur à l'url de l'image, vous la définissez à un dictionnaire contenant les options du symbole. Par exemple, j'ai réussi à créer un symbole qui est très similaire au marqueur standard:

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 M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1,
   };
}

var marker = new google.maps.Marker({
   map: map,
   position: new google.maps.LatLng(latitude, longitude),
   icon: pinSymbol("#FFF"),
});

Vector Marker

i Vous êtes prudent de garder le point de clé de forme à 0,0 vous évitez d'avoir à définir les paramètres de centrage de l'icône de marqueur. Un autre exemple de chemin, le même marqueur sans le point:

    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',

Dotless Vector Marker

et ici vous avez un drapeau de couleur très simple et laid:

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

Vector Flag

vous pouvez également créer les chemins en utilisant un outil visuel comme Inkscape (GNU-GPL, multiplatform). Quelques conseils utiles:

  • Google API accepte juste un chemin simple, donc vous devez tourner n'importe quel autre objet (carré, cercle...) dans un chemin et les joindre comme un seul. Les deux commandes dans le menu Path.
  • pour déplacer le chemin vers le (0,0), allez dans le mode D'édition du chemin (F2) sélectionnez Tout les noeuds de contrôle et faites-les glisser. Déplacer L'objet avec F1 ne changera pas le noeud de chemin coords.
  • pour s'assurer que le point de référence est à (0,0), vous pouvez le sélectionner seul et éditer les coords à la main sur la barre d'outils supérieure.
  • après avoir sauvegardé le fichier SVG, qui est un XML, ouvrez-le avec un éditeur, recherchez l'élément svg:path et copiez le contenu de l'attribut "d".
103
répondu vokimon 2018-03-28 21:30:44

la chose la plus proche que j'ai pu obtenir avec le StyledMarker est ce .

la balle au milieu n'est pas aussi grosse que celle par défaut. la classe StyledMarker construit simplement cette url et demande à l'api google de créer le marqueur .

du exemple d'utilisation de classe utilisez "%E2 % 80% A2 " comme votre texte, comme dans:

var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

vous aurez besoin de modifier StyledMarker.js pour commenter les lignes:

  if (text_) {
    text_ = text_.substr(0,2);
  }

comme ceci réduira la chaîne de texte à 2 caractères.

alternativement vous pouvez créer des images de repère personnalisées basées sur celle par défaut avec les couleurs que vous désirez et Outrepasser le marqueur par défaut avec le code tel que:

marker = new google.maps.Marker({
  map:map,
  position: latlng,
  icon: new google.maps.MarkerImage(
    'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 24)
  )
});
14
répondu Jack B Nimble 2016-03-15 18:19:13

Salut Vous pouvez utiliser l'icône comme SVG et définir les couleurs. Voir ce code

/*
 * declare map and places as a global variable
 */
var map;
var places = [
    ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
    ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
    ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
    ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
    ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    var map = new google.maps.Map(document.getElementById("map_div"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    /*
     * create infowindow (which will be used by markers)
     */
    var infoWindow = new google.maps.InfoWindow();
    /*
     * create bounds (which will be used auto zoom map)
     */
    var bounds = new google.maps.LatLngBounds();

    /*
     * marker creater function (acts as a closure for html parameter)
     */
    function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        bounds.extend(options.position);
        if (html) {
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
                map.setZoom(map.getZoom() + 1)
                map.setCenter(marker.getPosition());
            });
        }
        return marker;
    }

    /*
     * add markers to map
     */
    for (var i = 0; i < places.length; i++) {
        var point = places[i];
        createMarker({
            position: new google.maps.LatLng(point[2], point[3]),
            map: map,
            icon: {
                path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
                scale: 0.6,
                strokeWeight: 0.2,
                strokeColor: 'black',
                strokeOpacity: 1,
                fillColor: point[4],
                fillOpacity: 0.85,
            },
        }, point[1]);
    };
    map.fitBounds(bounds);
});
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>
11
répondu Pablo Veintimilla 2015-08-16 03:29:55

j'ai étendu vokimon la réponse de un peu, le rendant un peu plus pratique pour modifier d'autres propriétés.

function customIcon (opts) {
  return Object.assign({
    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 M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
    fillColor: '#34495e',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1,
  }, opts);
}

Utilisation:

marker.setIcon(customIcon({
  fillColor: '#fff',
  strokeColor: '#000'
}));

ou lors de la définition d'un nouveau marqueur:

const marker = new google.maps.Marker({
  position: {
    lat: ...,
    lng: ...
  },
  icon: customIcon({
    fillColor: '#2ecc71'
  }),
  map: map
});
10
répondu Brad 2017-05-23 12:18:18

depuis la version 3.11 de l'API GoogleMaps, l'objet Icon remplace MarkerImage . Icon supporte les mêmes paramètres que MarkerImage. J'ai même trouvé ça un peu plus vers l'avant.

Un exemple pourrait ressembler à ceci:

var image = {
  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)
};

pour plus d'informations consultez ce site

6
répondu 5mark 2016-03-15 18:39:14

Dans Internet Explorer , cette solution ne fonctionne pas en ssl.

on peut voir l'erreur dans la console comme:

SEC7111 : la sécurité HTTPS est compromise par ce ,

palliatif : comme l'un des utilisateurs ici suggéré remplacer chart.apis.google.com à chart.googleapis.com pour le chemin D'URL pour éviter l'erreur SSL.

4
répondu devgal 2016-03-15 19:59:18

Vous pouvez utiliser ce code, il fonctionne très bien.

 var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>

 var marker = new google.maps.Marker({
            position: yourlatlong,
            icon: pinImage,
            map: map
        });
2
répondu khurram 2016-12-21 12:06:43

j'essaie deux façons de créer le marqueur Google map personnalisé, CE Code d'exécution utilisé canvg.js est la meilleure compatibilité pour browser.le Code commenté-Out ne supporte pas IE11 actuellement.

var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });
  var markerOption = {
    latitude: 59.327,
    longitude: 18.067,
    color: "#" + "000",
    text: "ha"
  };
  marker = createMarker(markerOption);
  marker.setMap(map);
  marker.addListener('click', changeColorAndText);
};

function changeColorAndText() {
  var iconTmpObj = createSvgIcon( "#c00", "ok" );
  marker.setOptions( {
                icon: iconTmpObj
            } );
};

function createMarker(options) {
  //IE MarkerShape has problem
  var markerObj = new google.maps.Marker({
    icon: createSvgIcon(options.color, options.text),
    position: {
      lat: parseFloat(options.latitude),
      lng: parseFloat(options.longitude)
    },
    draggable: false,
    visible: true,
    zIndex: 10,
    shape: {
      coords: CustomShapeCoords,
      type: 'poly'
    }
  });

  return markerObj;
};

function createSvgIcon(color, text) {
  var div = $("<div></div>");

  var svg = $(
    '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
    '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
    '</svg>'
  );
  div.append(svg);

  var dd = $("<canvas height='50px' width='50px'></cancas>");

  var svgHtml = div[0].innerHTML;

  //todo yao gai bu dui
  canvg(dd[0], svgHtml);

  var imgSrc = dd[0].toDataURL("image/png");
  //"scaledSize" and "optimized: false" together seems did the tricky ---IE11  &&  viewBox influent IE scaledSize
  //var svg = '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
  //    + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
  //    + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
  //    + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
  //    + '</svg>';
  //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);

  var iconObj = {
    size: new google.maps.Size(32, 43),
    url: imgSrc,
    scaledSize: new google.maps.Size(32, 43)
  };

  return iconObj;
};
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your Custom Marker </title>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
    <script src="https://canvg.github.io/canvg/canvg.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

</html>
1
répondu Sun 2017-07-17 05:03:33

Combine un marqueur basé sur le symbole dont le chemin dessine le contour, avec un caractère '●' pour le centre. Vous pouvez remplacer le point par un autre texte ('A', 'B', etc.) comme souhaité.

cette fonction retourne les options pour un marqueur avec le texte donné (s'il y en a), la couleur du texte, et remplir la couleur. Il utilise la couleur du texte pour le contour.

function createSymbolMarkerOptions(text, textColor, fillColor) {
    return {
        icon: {
            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: fillColor,
            fillOpacity: 1,
            strokeColor: textColor,
            strokeWeight: 1.8,
            labelOrigin: { x: 0, y: -30 }
        },
        label: {
            text: text || '●',
            color: textColor
        }
    };
}
1
répondu Edward Brey 2018-04-29 13:10:04

changer de chart.googleapis.com pour le chemin, sinon SSL ne fonctionne pas

0
répondu user2465583 2013-07-12 07:13:40

en utilisant l'Api V3 de swift et de Google Maps, c'était la façon la plus simple que j'ai pu faire:

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

j'espère que ça aidera quelqu'un.

0
répondu JoeGalind 2015-07-28 12:56:16

ce sont des marqueurs circulaires de costume

small_red:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC

small_yellow:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==

small_green:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==

small_blue:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC

small_purple:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==

ce sont des images 9x9 png.

une fois qu'ils sont sur votre page vous pouvez juste les faire glisser et vous aurez le fichier png réel.

0
répondu Fawad Ali 2017-04-11 17:22:41

j'ai essayé pendant longtemps d'améliorer le marqueur dessiné de vokimon et de le rendre plus similaire à Google Maps one (et assez bien réussi). C'est le code que j'ai reçu:

let circle=true;

path = 'M 0,0  C -0.7,-9 -3,-14 -5.5,-18.5 '+   
'A 16,16 0 0,1 -11,-29 '+  
'A 11,11 0 1,1 11,-29 '+  
'A 16,16 0 0,1 5.5,-18.5 '+  
'C 3,-14 0.7,-9 0,0 z '+  
['', 'M -2,-28 '+  
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];   

Je l'ai aussi réduit de 0,8.

0
répondu Nataliia Khotiaintseva 2018-08-09 10:51:16