您可以保留加星标的图钉图标，并在其旁边添加一个不显眼的标签。这个标签可以表达任何内容，但我只保留了一个数字。它是MarkerWithLabel 库 http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/examples/basic.html (在这里下载 http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js)
DEMO http://jsfiddle.net/yV6xv/21/ http://jsfiddle.net/yV6xv/21/
您还需要为其定义一个 CSS。
.labels {
color: blue;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
width: 25px;
border: 1px solid black;
white-space: nowrap;
}
并将常规标记替换为 MarkerWithLabel：
for (var i = 0; i < point.length; i++) {
var marker = new MarkerWithLabel({
map: map,
position: point[i],
icon: pinImage,
shadow: pinShadow,
labelContent: i,
labelAnchor: new google.maps.Point(12, -5),
labelClass: "labels"
});
}
包含在 HTML 文件中
<head>
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
.labels {
color: blue;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
width: 25px;
border: 1px solid black;
white-space: nowrap;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>
<script type="text/javascript">
var map;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
...
