我见过很多类似的问题(这里，这里和这里)，但他们都接受了不能解决我的问题的答案。我发现这个问题的最佳解决方案是StyledMarker库，它允许您定义标记的自定义颜色，但我不能让它使用默认标记(当您做谷歌地图搜索时得到的-中间有一个点)，它似乎只是提供了一个字母标记，或一个特殊的图标。
当前回答
我尝试了两种方法来创建自定义谷歌地图标记，此运行代码使用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>
其他回答
正如其他人所提到的，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多边形并不难。
结合一个基于符号的标记(其路径绘制轮廓)和一个“●”字符作为中心。您可以根据需要将点替换为其他文本('A'， 'B'等)。
这个函数返回带有给定文本(如果有)、文本颜色和填充颜色的标记的选项。它使用文本颜色作为大纲。
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
}
};
}
我尝试了两种方法来创建自定义谷歌地图标记，此运行代码使用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>
你可以使用这段代码，它工作得很好。
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
});
从谷歌maps API的3.11版本开始，Icon对象取代了MarkerImage。Icon支持与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)
};
欲了解更多信息，请查看该网站
