我正在制作一张上面有多个标记的地图。
这些标记使用自定义图标，但我还想在顶部添加数字。我已经看到这是如何使用旧版本的 API 来完成的。我怎样才能在 V3 中做到这一点？
*注意——当您将鼠标悬停在标记上时，“标题”属性会创建一个工具提示，但我希望即使您没有将鼠标悬停在自定义图像之上，它也会分层放置在自定义图像之上。
这是标记类的文档，这些属性似乎都没有帮助：http : //code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions
不幸的是，这并不容易。您可以基于 OverlayView 类（示例）创建自己的自定义标记，并将您自己的 HTML 放入其中，包括一个计数器。这将为您留下一个非常基本的标记，您无法轻松拖动或添加阴影，但它非常可定制。
或者，您可以向默认标记添加标签。这将不太可定制，但应该可以工作。它还保留了标准标记所做的所有有用的事情。
您可以在 Google 的文章Fun with MVC Objects 中阅读有关叠加层的更多信息。
编辑：如果您不想创建 JavaScript 类，则可以使用Google's Chart API。例如：
编号标记：
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000
文字标记：
http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo
这是一种快速简便的方法，但它的可定制性较差，并且需要客户端为每个标记下载一个新图像。
这是我在 V3 中的做法：
我首先加载谷歌地图 api，然后在回调方法中initialize()加载我在这里找到的MarkerWithLabel.js：
function initialize() {
$.getScript("/js/site/marker/MarkerWithLabel.js#{applicationBean.version}", function(){
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(currentLat, currentLng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('mapholder'),
mapOptions);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < mapData.length; i++) {
createMarker(i+1, map, mapData[i]); <!-- MARKERS! -->
extendBounds(bounds, mapData[i]);
}
map.fitBounds(bounds);
var maximumZoomLevel = 16;
var minimumZoomLevel = 11;
var ourZoom = defaultZoomLevel; // default zoom level
var blistener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
if (this.getZoom(map.getBounds) > 16) {
this.setZoom(maximumZoomLevel);
}
google.maps.event.removeListener(blistener);
});
});
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
然后我创建标记createMarker()：
function createMarker(number, currentMap, currentMapData) {
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(currentMapData[0], currentMapData[1]),
map: currentMap,
icon: '/img/sticker/empty.png',
shadow: '/img/sticker/bubble_shadow.png',
transparent: '/img/sticker/bubble_transparent.png',
draggable: false,
raiseOnDrag: false,
labelContent: ""+number,
labelAnchor: new google.maps.Point(3, 30),
labelClass: "mapIconLabel", // the CSS class for the label
labelInBackground: false
});
}
由于我将mapIconLabel类添加到标记中，因此我可以在我的 css 中添加一些 css 规则：
.mapIconLabel {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
font-family: 'DINNextRoundedLTProMediumRegular';
}
结果如下：
我没有足够的声誉来评论答案，但想指出 Google Chart API 已被弃用。
从API 主页：
自 2012 年 4 月 20 日起，Google Chart Tools 的信息图表部分已正式弃用。
您可能希望从本站点提供的资源中下载一组带编号的图标：
那么你应该能够做到以下几点：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Demo</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
for (var i = 0; i < locations.length; i++) {
var image = new google.maps.MarkerImage('marker' + i + '.png',
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3]
});
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();">
<div id="map" style="width:400px; height:500px;"></div>
</body>
</html>
上面例子的截图：
请注意，您可以轻松地在标记后面添加阴影。您可能需要查看Google Maps API Reference: Complex Markers 中的示例以获取更多信息。
这现已添加到映射文档中，并且不需要第三方代码。
您可以组合这两个示例：
https://developers.google.com/maps/documentation/javascript/examples/marker-labels
https://developers.google.com/maps/documentation/javascript/examples/icon-simple
要获得这样的代码：
var labelIndex = 0;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';
function initialize() {
var bangalore = { lat: 12.97, lng: 77.59 };
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12,
center: bangalore
});
// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng, map);
});
// Add a marker at the center of the map.
addMarker(bangalore, map);
}
// Adds a marker to the map.
function addMarker(location, map) {
// Add the marker at the clicked location, and add the next-available label
// from the array of alphabetical characters.
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex],
map: map,
icon: 'image.png'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
请注意，如果您有超过 35 个标记，此方法将不起作用，因为标签仅显示第一个字符（使用 AZ 和 0-9 为 35）。请为此Google 地图问题投票以请求取消此限制。
