我见过很多类似的问题(这里，这里和这里)，但他们都接受了不能解决我的问题的答案。我发现这个问题的最佳解决方案是StyledMarker库，它允许您定义标记的自定义颜色，但我不能让它使用默认标记(当您做谷歌地图搜索时得到的-中间有一个点)，它似乎只是提供了一个字母标记，或一个特殊的图标。
当前回答
嗨，你可以使用图标作为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>
其他回答
正如其他人所提到的，vokimon的答案是伟大的，但不幸的是，谷歌地图有点慢时，有许多SymbolPath/ svg为基础的标记同时。
看起来使用Data URI要快得多，与png差不多。
此外，由于这是一个完整的SVG文档，因此可以为圆点使用适当的填充圆。路径被修改，因此它不再偏移到左上角，因此需要定义锚。
下面是生成这些标记的修改版本:
var coloredMarkerDef = {
svg: [
'<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
'<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
'<circle cx="11" cy="11" r="3"/>',
'</svg>'
].join(''),
anchor: {x: 11, y: 41},
size: {width: 22, height: 41}
};
var getColoredMarkerSvg = function(color) {
return coloredMarkerDef.svg.replace('{fillColor}', color);
};
var getColoredMarkerUri = function(color) {
return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};
var getColoredMarkerIcon = function(color) {
return {
url: getColoredMarkerUri(color),
anchor: coloredMarkerDef.anchor,
size: coloredMarkerDef.size,
scaledSize: coloredMarkerDef.size
}
};
用法:
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude, longitude),
icon: getColoredMarkerIcon("#FFF")
});
缺点是，就像PNG图像一样，整个矩形都是可点击的。理论上，跟踪SVG路径并生成MarkerShape多边形并不难。
我尝试了两种方法来创建自定义谷歌地图标记，此运行代码使用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>
下面是使用google Maps API本身的一个很好的解决方案。没有外部服务，没有额外的库。它可以自定义形状和多种颜色和样式。解决方案使用矢量标记，googlemaps api称之为符号。
除了少数且有限的预定义符号之外，您还可以通过指定SVG路径字符串(Spec)来制作任何颜色的任何形状。
要使用它，不要将“icon”标记选项设置为图像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: '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，多平台)这样的可视化工具来创建路径。一些有用的提示:
Google API just accepts a single path, so you have to turn any other object (square, cercle...) into a path and join them as a single one. Both commands at the Path menu. To move the path to the (0,0), go to the Path Edit mode (F2) select all the control nodes and drag them. Moving the object with F1, won't change the path node coords. To ensure the reference point is at (0,0), you can select it alone and edit the coords by hand on the top toolbar. After saving the SVG file, which is an XML, open it with an editor, look for the svg:path element and copy the content of the 'd' attribute.
在ie浏览器中，ssl下不支持此解决方案。 在控制台可以看到错误如下: SEC7111: HTTPS安全因此受到损害， 解决方案:正如这里的一位用户建议的那样替换 chart.apis.google.com到chart.googleapis.com的URL路径，以避免SSL错误。
嗨，你可以使用图标作为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>
