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。

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

3 个答案: