Google Maps API 3 – 默认（点）标记的自定义标记颜色

我已经看到很多其他类似的问题（ 这里 ， 这里和这里 ），但他们都接受了不能解决我的问题的答案。 我发现问题的最佳解决scheme是StyledMarker库，它可以让你为标记定义自定义颜色，但是我不能让它使用默认的标记（当你做谷歌地图search时得到的标记 – 与一个点在中间），它似乎只提供了一个字母，或一个特殊的图标标记。

您可以dynamic请求Google图表API中的图标图像： 

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

看起来像这样： 默认颜色 图像是21 × 34像素，并且针尖在位置（ 10,34 ）

而且你还需要一个单独的阴影图像（以便它不会重叠附近的图标）： 

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

看起来像这样： 在这里输入图像描述 图像是40 × 37像素，并且针尖在位置（ 12,35 ）

在构buildMarkerImage时 ，需要相应地设置大小和定位点： 

  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));

然后，您可以将标记添加到您的地图： 

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

只需用您所使用的颜色代码replace“FE7569”即可。 例如： 默认颜色绿色黄色

由于Jack B Nimble的灵感而获得的信用;）

如果您使用Google Maps API v3，则可以使用setIcon eg 

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

或者作为标记init的一部分： 

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

其他颜色：

  • 蓝色标记
  • 在这里输入图像描述 红色标记
  • 在这里输入图像描述 紫色标记
  • 在这里输入图像描述 黄色标记
  • 在这里输入图像描述 绿色标志

使用下面的一段代码来更新不同颜色的默认标记。 

 (BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

这是使用Gooogle Maps API本身的一个很好的解决scheme。 没有外部服务，没有额外的图书馆。 它可以自定义形状和多种颜色和样式。 解决scheme是使用vector标记，其中谷歌地图API调用符号 。

除了less数和有限的预定义符号外，还可以通过指定SVGpathstring（ Spec ）来制作任何颜色的任何形状。

要使用它，而不是设置“图标”标记选项的图像url，您将其设置为包含符号选项的字典。 例如，我设法制作了一个与标准标记非常相似的符号： 

 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"), });

我小心地将形状关键点保持在0,0，避免必须定义标记图标居中参数。 另一个path示例，没有点的相同标记： 

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

在这里，你有一个非常简单和丑陋的彩旗： 

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

您还可以使用Inkscape （GNU-GPL，多平台）等可视化工具创buildpath。 一些有用的提示：

  • Google API只接受一个path，因此您必须将任何其他对象（square，cercle …）合并为一个path并将它们合并为一个path。 这两个命令在path菜单。
  • 要将path移动到（0,0），请转至path编辑模式（F2），select所有控制节点并拖动它们。 用F1移动对象，不会改变path节点的坐标。
  • 为确保参考点位于（0,0），您可以单独select它并在顶部工具栏上手动编辑坐标。
  • 保存SVG文件（XML文件）后，用编辑器打开它，查找svg：path元素并复制'd'属性的内容。

那么，我已经能够与StyledMarker得到最接近的事情是这样的 。

中间的子弹虽然不像默认的那么大。 StyledMarker类只是build立这个url，并要求谷歌的API来创build标记 。

从class级使用示例中，使用“％E2％80％A2”作为文本，如下所示： 

 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});

您将需要修改StyledMarker.js注释掉下面的行： 

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

因为这会将文本string修剪为2个字符。

或者，您可以使用您所需的颜色创build基于默认标记图像的自定义标记图像，并使用如下代码覆盖默认标记： 

 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) ) });

嗨，你可以使用图标作为SVG和设置颜色。 看到这个代码 

 /* * 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>

自Google地图API版本3.11以来， Icon对象将replaceMarkerImage 。 图标支持与MarkerImage相同的参数。 我甚至发现它更简单一点。

一个例子可能是这样的： 

 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) };

进一步的信息检查这个网站

我已经将vokimon的答案稍微扩展了一些，使其更适合于更改其他属性。 

 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); }

用法： 

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

或者当定义一个新的标记时： 

 const marker = new google.maps.Marker({ position: { lat: ..., lng: ... }, icon: customIcon({ fillColor: '#2ecc71' }), map: map });

在Internet Explorer中 ， 此解决scheme在ssl中不起作用。

可以在控制台中看到错误：

SEC7111 ：HTTPS安全性受此影响，

解决方法 ：如此处的用户build议将chart.apis.google.comreplace为chart.googleapis.com以获取URLpath，以避免出现SSL错误。

你可以使用这个代码，它工作正常。 

  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 });

将其更改为chart.googleapis.com作为path，否则SSL将不起作用

使用swift和Google Maps Api v3，这是我能够做到的最简单的方法： 

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

希望它可以帮助别人。

这些是服装的圆形标记

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==

他们是9×9 png图像。

一旦他们在你的网页上，你可以拖动他们，你会有实际的PNG文件。

我尝试了两种方式来创build自定义的Google地图标记，这个运行代码使用canvg.js是对浏览器的最佳兼容性。注释代码并不支持IE11。 

 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>
Interesting Posts

在地址arrays中添加多个标记Google Map API v3，并在pageLoad上进行地理编码时避免OVER_QUERY_LIMIT

Google Maps API V3：如何显示从A点到B点（蓝线）的方向？

Google Maps API v3：如何删除所有标记？

Google Maps V3：通过AJAX加载infowindow内容

如何在谷歌地图v3中获取多边形的中心？

谷歌地图 – 如何获得米之间的两点之间的距离？

Google Maps API v3中的OVER_QUERY_LIMIT：如何暂停/延迟Javascript以减慢速度？

如何在Google地图API中沿着始发地和目的地之间的路线获取地点（例如加油站）

如何在google-maps-v3上获取所有标记

Google地图API 3：从右键单击获取坐标