Google Maps API 3 - 默认（点）标记的自定义标记颜色 [英] Google Maps API 3 - Custom marker color for default (dot) marker

问题描述

我见过很多类似于此的其他问题（您需要相应地设置尺寸和定位点：

  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，
新google.maps.Size（21,34），
新google.maps.Point（0,0），
新google.maps.Point（10，34））; 
 var pinShadow = new google.maps.MarkerImage（http://chart.apis.google.com/chart?chst=d_map_pin_shadow，
 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 ，
图标：pinImage，
 shadow：pinShadow 
}）; 
  

只需将您的颜色代码替换为FE7569即可。例如：

由于 Jack B Nimble 的灵感;）

I've seen lots of other questions similar to this (here, here and here), but they all have accepted answers that don't solve my problem. The best solution I have found to the problem is the StyledMarker library, which does let you define custom colours for markers, but I can't get it to use the default marker (the one you get when you do a google maps search - with a dot in the middle), it just seems to provide markers with a letter in, or with a special icon.

解决方案

You can dynamically request icon images from the Google charts api with the urls:

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

Which looks like this: the image is 21x34 pixels and the pin tip is at position (10, 34)

And you'll also want a separate shadow image (so that it doesn't overlap nearby icons):

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

Which looks like this: the image is 40x37 pixels and the pin tip is at position (12, 35)

When you construct your MarkerImages you need to set the size and anchor points accordingly:

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

You can then add the marker to your map with:

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

Simply replace "FE7569" with the color code you're after. Eg:

Credit due to Jack B Nimble for the inspiration ;)

这篇关于Google Maps API 3 - 默认（点）标记的自定义标记颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！