我正在使用谷歌地图版本3 api和谷歌地图标记。当标记彼此靠近时,标签重叠并且看起来很糟糕。我试图给标记标签提供背景颜色,但谷歌地图标记标签似乎没有背景颜色属性。我尝试使用MarkerWithLabel api但是当我有1000个标记时,渲染速度比google maps deafult Marker Label慢。我把js小提琴包括在内。有人可以帮我这个吗?
https://jsfiddle.net/dcvc99qz/12/
function initMap() {
var pointA = new google.maps.LatLng(51.2750, 1.0870),
pointB = new google.maps.LatLng(51.2750, 0.8140),
myOptions = {
zoom: 5,
center: pointA,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
markerA = new google.maps.Marker({
position: pointA,
title: "point A",
label: "AA",
map: map
}),
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "BB",
map: map
});
}
initMap();
答案 0 :(得分:5)
标记只是图像,你不能只改变它的背景颜色,你必须定义一个新的图标。首先,准备具有正确颜色的新透明图像。然后创建新的图标定义。
var icons = {
green: {
// link to an image, use https if original site also uses https
url: 'https://i.imgur.com/5Yd25Ga.png',
// set size of an image
size: new google.maps.Size(22, 40),
// if an image is a sprite, set its relative position from 0, 0
origin: new google.maps.Point(0, 0),
// part of an image pointing on location on the map
anchor: new google.maps.Point(11, 40),
// position of text label on icon
labelOrigin: new google.maps.Point(11, 10)
},
red: {
// ...
}
};
的文档
添加新标记时,将其图标设置为已定义的图标之一。
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "BB",
icon: icons.green,
map: map
});
当点彼此靠近时,您会注意到文本标签重叠。要解决此问题,请将增加zIndex
添加到每个标记。
markerA = new google.maps.Marker({
position: pointA,
title: "point A",
label: "AA",
zIndex: 1000,
icon: icons.red,
map: map
});
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "BB",
zIndex: 1001,
icon: icons.green,
map: map
});
完整的工作示例:jsfiddle.net/yLhbxnz6/