谷歌地图 - 带有数字的自定义标记答案

【问题标题】：Google maps - custom marker with number谷歌地图 - 带有数字的自定义标记
【发布时间】：2013-05-20 01:07:21
【问题描述】：

我目前正在使用以下代码显示标记：

var marker = new google.maps,Marker({
  map: maps,
  position: coordinate,
  icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ (position) +'|FF776B|000000',
});

这会显示带有数字的默认地图标记。

问题是，你能不能有一个自定义图标，比如说marker.png 然后覆盖一个数字？

谢谢

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

像这样指定你的标记：

var myLatLng = new google.maps.LatLng(lat, long);
var myOptions = {
  zoom: 4,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

var styleMaker1 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"00ff00",text:"1"}),position:myLatLng,map:map});

【讨论】：

我知道该怎么做。我想要的是一个自定义标记，上面覆盖了一个数字。我的代码显示带有数字的默认标记。
查看谷歌样式标记自定义库code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
谢谢，我会看看是否有帮助。我正在使用一个作为 php 循环的函数来添加标记。
那就先阅读这份文件developers.google.com/maps/articles/phpsqlsearch_v3
在我看来这不是一个正确的答案。问题是关于组合自定义标记图像和任意数字字符串。

【解决方案2】：

使用 markerWithLabel.js 库...

代码如下：

marker = new MarkerWithLabel({
            map: maps,
            position: coordinate,
            icon : yourMarkerImage,
            labelContent : yourNumberOnMarker,
            labelAnchor : yourLabelPosition,     // e.g. new google.maps.Point(21, 10);
            labelClass : "labels",          // the CSS class for the label
            labelInBackground : false
        });

【讨论】：

【解决方案3】：

我一直在研究这个，并使用了 Google Charts API，但是如果您想要一个基于 png 的自定义标记，例如，您可以通过 PHP 和图像库根据您的参数返回自定义标记，类似于如何您正在调用的 Google Charts API。

【讨论】：