谷歌地图API 3 -自定义标记颜色的默认(点)标记

我见过很多类似的问题(在这里， 在这里和在这里)，但他们都接受了不能解决我的问题的答案。我发现这个问题的最佳解决方案是StyledMarker库，它确实让你定义自定义颜色的标记，但我不能让它使用默认标记(当你做谷歌地图搜索-中间有一个点)，它似乎只是提供了一个字母标记，或一个特殊的图标。

388533 次浏览
小开

好吧，我能用StyledMarker得到的最接近的东西是这。

不过，中间的子弹并不像默认的子弹那么大。StyledMarker类只是构建这个url，并要求谷歌api创建标记。

从类使用示例使用“a2 % E2 % 80%”作为你的文本，如:

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)
)
});
小开
最佳答案

你可以动态地从谷歌图表api中使用url请求图标图像:

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

它看起来是这样的:默认颜色图像是21 x34像素和针尖在位置34岁的(10)

你还需要一个单独的阴影图像(这样它就不会重叠附近的图标):

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

它看起来是这样的:enter image description here图像是40 x37像素和针尖在位置(12日,35)

当你构造你的__abc 0时，你需要相应地设置大小和锚点:

    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·Nimble的灵感;)

小开

将路径改为chart.googleapis.com，否则SSL将无法工作

小开

如果你使用谷歌Maps API v3，你可以使用setIcon。

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

或者作为标记init的一部分:

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

其他颜色:

使用下面的代码用不同的颜色更新默认标记。

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
小开

你可以使用这段代码，它工作得很好。

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

从谷歌映射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)
};

查看这个网站

小开

下面是使用google Maps API本身的一个很好的解决方案。没有外部服务，没有额外的库。它可以自定义形状和多种颜色和样式。解决方案使用矢量标记，googlemaps api称之为符号。

除了少数且有限的预定义符号之外，您还可以通过指定SVG路径字符串(规范)来制作任何颜色的任何形状。

要使用它，不要将“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"),
});

Vector Marker

如果你小心地保持形状关键点在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',

Dotless Vector Marker

这里有一面非常简单而丑陋的彩色旗帜:

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

Vector Flag

你也可以使用像之 (GNU-GPL，多平台)这样的可视化工具来创建路径。一些有用的提示:

  • 谷歌API只接受单个路径，因此您必须将任何其他对象(square, circle…)转换为路径并将它们连接为单个路径。这两个命令都在Path菜单上。
  • 要移动路径到(0,0)，进入路径编辑模式(F2)全选 拖动控制节点。用F1移动对象，不会改变路径节点坐标
  • 要确保参考点位于(0,0)，您可以单独选择它，并在顶部工具栏上手动编辑坐标。
  • 保存SVG文件(XML文件)后，用编辑器打开它，寻找SVG:path元素并复制'd'属性的内容。
小开

在Internet Explorer中，这个解决方案在ssl中不起作用。

在控制台可以看到错误如下:

SEC7111: HTTPS安全被这破坏，

解决方案:作为这里的一个用户建议替换 chart.apis.google.com到chart.googleapis.com为URL路径，以避免SSL错误。

小开

使用swift和谷歌Maps Api v3，这是我能够做到的最简单的方法:

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

希望它能帮助到别人。

小开

嗨，你可以使用图标作为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>

小开

这些是定制的圆形标记

small_red:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC

small_yellow:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==

small_green:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==

small_blue:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC

small_purple:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==
它们是9x9的png图像。

一旦他们在你的页面上，你可以把他们拖走，你会有实际的png文件。

小开

我对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
});
小开

我尝试了两种方法来创建自定义谷歌地图标记，此运行代码使用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>

小开

将路径绘制轮廓的之平衡标记与'●'字符作为中心组合。您可以根据需要将点替换为其他文本('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
}
};
}
小开

我尝试了很长一段时间来改进vokimon的绘制标记，使其更类似于谷歌Maps 1(并且非常成功)。这是我得到的代码:

let circle=true;


path = 'M 0,0  C -0.7,-9 -3,-14 -5.5,-18.5 '+
'A 16,16 0 0,1 -11,-29 '+
'A 11,11 0 1,1 11,-29 '+
'A 16,16 0 0,1 5.5,-18.5 '+
'C 3,-14 0.7,-9 0,0 z '+
['', 'M -2,-28 '+
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];

我还把它缩放了0.8。

小开

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

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

小开

你也可以使用颜色代码。

 const marker: Marker = this.map.addMarkerSync({
icon: '#008000',
animation: 'DROP',
position: {lat: 39.0492127, lng: -111.1435662},
map: this.map,
});
小开

有时候很简单的事情，也可以用复杂来回答。我并不是说上面的答案都是不正确的，但我只是想说，它可以这么简单:

我知道这个问题很老了，但如果有人只是想改变大头针或标记颜色，那么请查看文档:https://developers.google.com/maps/documentation/android-sdk/marker

当你添加你的标记时，只需设置图标属性:

GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
.position(latLng)
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));

有10种默认颜色可供选择。如果这还不够(简单的解决方案)，那么我可能会选择其他答案中给出的更复杂的解决方案，满足更复杂的需求。

ps:我在另一个答案中写过类似的东西，因此我应该参考那个答案，但上次我这么做的时候，我被要求张贴答案，因为它太短了(就像这个)..

小开

2022解决方案:高级标记

👋嗨谷歌地图JavaScript API开发者在这里。

谷歌最近发布了新的先进的标记，它有一些非常酷的特性，包括自定义默认标记的颜色，字形，字形颜色和比例等。我们一直在努力提高性能。

新的api仍在测试阶段，我们希望得到您的反馈!😊

enter image description here


提交答案