google-maps - 谷歌地图 - 带有数字的自定义标记

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

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