谷歌地图-自定义标记与数字

Question

我目前正在使用以下代码显示一个标记:

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，然后有一个数字覆盖?

谢谢

Answer 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});

Answer 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
        });

Answer 3

我已经进入了这个，并使用了谷歌图表API，但如果你想要一个基于png的自定义标记，例如你可以通过PHP和图像库根据你的参数返回你的自定义标记，类似于你正在调用的谷歌图表API。