如何在 Google Maps V3 中创建带编号的地图标记？

Question

我正在制作一张有多个标记的地图。

这些标记使用自定义图标，但我还想在顶部添加数字。我已经看到这是如何使用旧版本的 API 完成的。我如何在 V3 中执行此操作？

*注意——当您将鼠标悬停在标记上时，“title”属性会创建一个工具提示，但我想要一些东西即使您没有将鼠标悬停在它上面时也会叠加在自定义图像之上。

这是标记类的文档，这些属性似乎都没有帮助： http ://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions

原文由 marclar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不幸的是，这并不容易。您可以基于 OverlayView 类（ 示例）创建您自己的自定义标记，并将您自己的 HTML 放入其中，包括一个计数器。这将为您留下一个非常基本的标记，您不能四处拖动或轻松添加阴影，但它是非常可定制的。

或者，您可以 向默认标记添加标签。这将不太可定制，但应该可以工作。它还保留了标准标记所做的所有有用的事情。

您可以在 Google 的文章 Fun with MVC Objects 中阅读有关叠加层的更多信息。

编辑：如果您不想创建 JavaScript 类，您可以使用 Google 的 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

这是一种快速简便的方法，但它的可定制性较低，并且需要客户端为每个标记下载一个新图像。

原文由 dave1010 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这就是我在 V3 中的做法：

我首先加载 google maps 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) &gt; 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&amp;libraries=places&amp;sensor=false&amp;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';
}

结果如下：

原文由 jakob 发布，翻译遵循 CC BY-SA 3.0 许可协议