我见过很多类似的问题(这里，这里和这里)，但他们都接受了不能解决我的问题的答案。我发现这个问题的最佳解决方案是StyledMarker库，它允许您定义标记的自定义颜色，但我不能让它使用默认标记(当您做谷歌地图搜索时得到的-中间有一个点)，它似乎只是提供了一个字母标记，或一个特殊的图标。
当前回答
在ie浏览器中，ssl下不支持此解决方案。 在控制台可以看到错误如下: SEC7111: HTTPS安全因此受到损害， 解决方案:正如这里的一位用户建议的那样替换 chart.apis.google.com到chart.googleapis.com的URL路径，以避免SSL错误。
其他回答
在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>
从谷歌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)
};
欲了解更多信息，请查看该网站
将路径改为chart.googleapis.com，否则SSL将无法工作
你可以动态地请求图标图像从谷歌图表api与网址:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569
它看起来像这样:图像是21x34像素，针尖的位置是(10,34)
你还需要一个单独的阴影图像(这样它就不会重叠附近的图标):
http://chart.apis.google.com/chart?chst=d_map_pin_shadow
它看起来像这样:图像是40x37像素，针尖的位置(12,35)
当你构建你的MarkerImages时，你需要相应地设置大小和锚点:
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
});
只需将“FE7569”替换为您需要的颜色代码。例如:
归功于Jack B Nimble的灵感;)
