Google Maps API 3 - 默认(点)标记的自定义标记颜色

Question

我已经看到很多类似的问题(这里,这里和这里),但他们都接受了无法解决我的问题的答案.我发现问题的最佳解决方案是StyledMarker库,它允许您为标记定义自定义颜色,但我无法使用默认标记(当您进行谷歌地图搜索时获得的标记 - 与它只是提供带有字母的标记或带有特殊图标的标记.

Answer 1

您可以使用网址动态请求Google图表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 )位置

构建MarkerImage时,需要相应地设置大小和锚点:

    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"替换为您所使用的颜色代码即可.例如:

信贷由于插孔B敏捷为灵感;)

Answer 2

如果您使用Google Maps API v3,则可以使用setIcon例如

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

或者作为标记初始化的一部分:

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

其他颜色:

• 蓝色标记
• 红色标记
• 紫色标记
• 黄色标记
• 绿色标记

使用以下代码更新具有不同颜色的默认标记.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

Answer 3

这是使用Gooogle 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,multiplatform)等可视化工具创建路径.一些有用的提示:

• Google API只接受单个路径,因此您必须将任何其他对象(square,cercle ...)转换为路径并将它们作为单个路径连接.路径菜单中的两个命令.
• 要将路径移动到(0,0),请转到路径编辑模式(F2),选择所有控制节点并拖动它们.使用F1移动对象不会更改路径节点坐标.
• 要确保参考点位于(0,0),您可以单独选择它并在顶部工具栏上手动编辑坐标.
• 保存SVG文件(XML)后,使用编辑器打开它,查找svg:path元素并复制'd'属性的内容.

Answer 4

那么我用StyledMarker最接近的就是这个.

中间的子弹不是默认的子弹.StyledMarker类只是构建此url并要求google api创建标记.

从类使用示例中使用"%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);
  }

因为这会将文本字符串修剪为2个字符.

或者,您可以根据所需的颜色创建自定义标记图像,并使用以下代码覆盖默认标记:

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

Answer 5

您好,您可以使用图标作为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>

Answer 6

我稍微扩展了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
});

Answer 7

从谷歌地图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)
};

有关更多信息,请查看此站点

Answer 8

正如其他人所提到的，vokimon 的回答很好，但不幸的是，当同时有许多基于 SymbolPath/SVG 的标记时，谷歌地图有点慢。

看起来使用数据 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多边形并不太难。