在谷歌地图上的预定义标记形状上放置数字答案

【问题标题】：Place number on predefined marker shapes on google map在谷歌地图上的预定义标记形状上放置数字
【发布时间】：2014-10-14 16:50:34
【问题描述】：

我正在使用预定义的谷歌标记（圆形）。我想在这个标记上放置数字（1-100 之间），但我做不到。

我已经检查了此链接http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000，但它会在固定标记上显示数字。有什么办法可以将我的圆形标记传递给谷歌图表 api

这是我的标记的代码：

var markerIcon = {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: '#000',
    fillOpacity: .9,
    scale: 10,
    strokeColor: '#000',
    strokeWeight: 1
  };

 var marker = new google.maps.Marker({
        icon: markerIcon,
        position: new google.maps.LatLng(latitude,longitude),
        map: map,
    });

FIDDLE

【问题讨论】：

jsfiddle.net/cy55boru/6 试试这个作为开始。它不是圆形的，但它会给你一个起点。现在根据您在地图上放置的图钉，比如说数字 45，将文本参数更改为 45：图标：“dummyimage.com/32x32/000/fff&text=45”。您也可以使用圆形图标和 PHP+GD 创建自己的标记创建器。给url传一个参数，用$_GET["text"]获取，用header('')输出；

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

【解决方案1】：

从 v3.21 开始（目前是“实验”版本，v=3.exp），labelled markers are supported natively by the Google Maps Javascript API v3。

updated fiddle

代码 sn-p：

$(document).ready(function() {
   var params = {
     'lat': $('#map_canvas').data('lat'),
     'long': $('#map_canvas').data('long')
   };
   google.maps.event.addDomListener(window, 'load', initialize(params));

 });


 function initialize(coordinates) {
   var mapOptions = {
     center: new google.maps.LatLng(coordinates.lat, coordinates.long),
     zoom: 15,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
   };

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

   var markerIcon = {
     path: google.maps.SymbolPath.CIRCLE,
     fillColor: '#000',
     fillOpacity: .9,
     scale: 10,
     strokeColor: '#000',
     strokeWeight: 1
   };


   var marker = new google.maps.Marker({
     icon: markerIcon,
     position: new google.maps.LatLng(coordinates.lat, coordinates.long),
     map: map,
     label: {
       color: 'white',
       text: '1'
     }
   });

   marker.setMap(map);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:600px;height:300px" data-lat='40.8152' data-long='-73.0455'></div>

【讨论】：