如何在 Google Maps V3 中创建编号的地图标记?

Posted

技术标签:

【中文标题】如何在 Google Maps V3 中创建编号的地图标记?【英文标题】:How can I create numbered map markers in Google Maps V3? 【发布时间】:2011-01-27 01:07:56 【问题描述】:

我正在制作一张上面有多个标记的地图。

这些标记使用自定义图标,但我还想在顶部添加数字。我已经看到如何使用旧版本的 API 来实现这一点。如何在 V3 中做到这一点?

*注意——当您将鼠标悬停在标记上时,“title”属性会创建一个工具提示,但我希望即使您没有将鼠标悬停在自定义图像顶部,它也会分层显示。

这是标记类的文档,这些属性似乎都没有帮助:http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions

【问题讨论】:

Google maps: place number in marker?的可能重复 请参考***.com/a/37582234/3553665 这在 API 的 3.21 版本中是可能的,它引入了带有标签的标记,但前提是您有 Google Maps Issue 要求取消此限制。如果您希望他们解决问题,请给问题加注星标 - 谢谢! 【参考方案1】:
  $(document).ready(function() 
    // initiate Google maps
    initialize();
    // make a .hover event
    $('#markers_info .marker').hover(
      // mouse in
      function () 
        // first we need to know which <div class="marker"></div> we hovered
        var index = $('#markers_info .marker').index(this);
        markers[index].setIcon(highlightedIcon());
      ,
      // mouse out
      function () 
        // first we need to know which <div class="marker"></div> we hovered
        var index = $('#markers_info .marker').index(this);
        markers[index].setIcon(activeIcon());
      

      );
  );
  /**
    Google Maps stuff
    */
    var markerData = [   // the order of these markers must be the same as the <div class="marker"></div> elements
    lat: 43.0628, lng: -89.4165, title: 'Manneken Pis',
    lat: 43.0749, lng: -89.3927, title: 'Jeanneke Pis',
    lat: 43.0731, lng: -89.4012, title: 'Grand Place',
    lat: 43.0766, lng: -89.4125, title: 'Manneken Pis',
    lat: 43.0775, lng: -89.4457, title: 'Jeanneke Pis',
    lat: 43.0972, lng: -89.5043, title: 'Grand Place',
    lat: 43.1351, lng: -89.4385, title: 'Manneken Pis',
    lat: 43.1267, lng: -89.3203, title: 'Jeanneke Pis'
    ];
    var label = "1";
    var map;
    var markers = [];
    var mapOptions = 
      zoom: 12,
      center: new google.maps.LatLng(43.0731,-89.4360),// United state,madison long lat
      mapTypeId: google.maps.MapTypeId.ROADMAP
    ;

    function initialize() 
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      new google.maps.Size(49,100)
      for (var i=0; i<markerData.length; i++) 
        markers.push(
          new google.maps.Marker(
            position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng),
            title: markerData[i].title,
            map: map,
            label: 
              text: label,
              // Adding the custom label
              fontFamily: 'Raleway, sans-serif' + label,
              color: 'white',
              fontSize: "16px",
              fontweight:"bold"
            ,
            icon: activeIcon()
          )
          );
      
    
    // functions that return icons.  Make or find your own markers.
    function activeIcon() 
      return 
       path:
       "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z",
       fillColor: "#2f8aac",
       fillOpacity: 1,
       strokeWeight: 0,
       rotation: 0,
       scale: 0.08,
       anchor: new google.maps.Point(15, 30),
       labelOrigin: new google.maps.Point(200, 200)

     ;
   

    // functions that return icons.  When hovering at the sidebar.
   function highlightedIcon() 
    return 
      path:
      "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z",
      fillColor: "#d22a15",
      fillOpacity: 5,
      strokeWeight: 0,
      rotation: 0,
      scale: 0.12,
      anchor: new google.maps.Point(15, 30),
      labelOrigin: new google.maps.Point(200, 200)
    ;
  

【讨论】:

感谢您提供此代码 sn-p,它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法,并使其对有其他类似问题的未来读者更有用,从而大大提高其长期价值。请编辑您的答案以添加一些解释,包括您所做的假设。【参考方案2】:

也许有些人仍在寻找这个,但发现 Google 动态图标已弃用,其他地图图标库有点太丑了。

使用 URL 添加一个带有任意数字的简单标记。在使用 Google 我的地图的 Google Drive 中,当使用设置为“数字序列”的地图图层然后在地图上添加标记/点时,它会创建编号图标。

查看源代码,谷歌有自己的通过 URL 实现的方式:

https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container-bg_4x.png,icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1738-blank-sequence_4x.png&highlight=ff000000,0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=56&font=fonts/Roboto-Medium.ttf

Above URL

我没有广泛使用它,但是通过更改“highlight”参数中的十六进制颜色代码(颜色参数不会像您想象的那样改变颜色),“text”值可以设置为任何字符串和你可以制作一个漂亮的圆形图标,里面有任何数字/值。我相信其他参数也可能有用。

这种方法的一个警告,谁知道 Google 什么时候会从世界上删除这个 URL!

【讨论】:

【参考方案3】:

最简单的解决方案 - 使用 SVG

适用于:IE9IE10、FF、Chrome、Safari

(如果您使用其他浏览器,请“运行代码 sn-p”并发表评论)

除了 Google Maps API 之外没有外部依赖!

只要您的图标采用 .svg 格式,这相当 很容易。如果是这种情况,只需添加适当的文本元素并更改其内容以适应您的 JS 需求。

在您的.svg 代码中添加类似的内容(这是文本“部分”,稍后将使用 JS 进行更改):

<text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">1</text>

示例:(部分复制自@EstevãoLucas)

重要: 使用正确的&lt;text&gt; 标签属性。注意text-anchor="middle" x="50%" y="28" 哪个中心更长的数字(更多信息:How to place and center text in an SVG rectangle)

使用encodeURIComponent()(这可能确保与IE9和10兼容)

// Most important part (use output as Google Maps icon)
function getMarkerIcon(number) 
  // inline your SVG image with number variable
  var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 40 40"> <defs> <rect id="path-1"  /> <mask id="mask-2"   x="0" y="0" fill="white"> <use xlink:href="#path-1"/> </mask> </defs> <g id="Page-1" fill="none" fill-rule="evenodd"> <g id="Phone-Portrait---320" transform="translate(-209 -51)"> <g id="Group" transform="translate(209 51)"> <use id="Rectangle" fill="#FFEB3B" stroke="#F44336" stroke- mask="url(#mask-2)" xlink:href="#path-1"/> <text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">' + number + '</text> </g> </g> </g> </svg>';
  // use SVG without base64 see: https://css-tricks.com/probably-dont-base64-svg/
  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);


// Standard Maps API code
var markers = [
  [1, -14.2350040, -51.9252800],
  [2, -34.028249, 151.157507],
  [3, 39.0119020, -98.4842460],
  [5, 48.8566140, 2.3522220],
  [9, 38.7755940, -9.1353670],
  [12, 12.0733335, 52.8234367],
];

function initializeMaps() 
  var myLatLng = 
    lat: -25.363,
    lng: 131.044
  ;

  var map = new google.maps.Map(document.getElementById('map_canvas'), 
    zoom: 4,
    center: myLatLng
  );

  var bounds = new google.maps.LatLngBounds();

  markers.forEach(function(point) 
      var pos = new google.maps.LatLng(point[1], point[2]);

      new google.maps.Marker(
        position: pos,
        map: map,
        icon: getMarkerIcon(point[0]),         
      );

      bounds.extend(pos);
  );

  map.fitBounds(bounds);


initializeMaps();
#map_canvas 
  width: 100%;
  height: 300px;
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>        
  </head>

  <body>
    <div id="map_canvas"></div>
  </body>
  
  <script src="script.js"></script>

</html>

有关 Google 地图中的内联 SVG 的更多信息:https://robert.katzki.de/posts/inline-svg-as-google-maps-marker

【讨论】:

【参考方案4】:

这现已添加到映射文档中,并且不需要第三方代码。

你可以结合这两个样本:

https://developers.google.com/maps/documentation/javascript/examples/marker-labels

https://developers.google.com/maps/documentation/javascript/examples/icon-simple

要获得这样的代码:

var labelIndex = 0;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';

function initialize() 
  var bangalore =  lat: 12.97, lng: 77.59 ;
  var map = new google.maps.Map(document.getElementById('map-canvas'), 
    zoom: 12,
    center: bangalore
  );

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) 
    addMarker(event.latLng, map);
  );

  // Add a marker at the center of the map.
  addMarker(bangalore, map);


// Adds a marker to the map.
function addMarker(location, map) 
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker(
    position: location,
    label: labels[labelIndex],
    map: map,
    icon: 'image.png'
  );


google.maps.event.addDomListener(window, 'load', initialize);

请注意,如果您有超过 35 个标记,则此方法将不起作用,因为标签仅显示第一个字符(使用 A-Z 和 0-9 表示 35)。请投票给Google Maps Issue 以请求取消此限制。

【讨论】:

'image.png' 不适合我。这张图片来自哪里?谢谢 image.png 您自己的图像文件,该文件位于此脚本旁边。如果文件不是本地文件或相对文件,则设置完整的 url,例如yourdomain.com/images/image.png 无论如何我可以加载我的本地图像文件吗?我应该把它放在哪里?非常感谢 你可以把你的图片和这个脚本放在同一个地方,如果你在自己的机器上测试,只需把它放在 html/javascript 文件旁边的文件夹中。 如果 labelIndex > 9 这不起作用。正如文档所述,marker.label 仅显示第一个字符。 (@IYM-14,如果你使用它,你可能会遇到错误)【参考方案5】:

Google 地图第 3 版内置了对标记标签的支持。不再需要生成自己的图像或实现 3rd 方类。 Marker Labels

【讨论】:

【参考方案6】:

我发现了最好的方法。 使用 Snap.svg 创建 svg,然后使用函数 toDataURL() 创建要包含为图标的图形数据。 请注意,我为标记使用了 SlidingMarker 类,它可以让我很好地移动标记。 使用 Snap.svg,您可以创建任何类型的图形,您的地图会看起来很棒。

var s = Snap(100, 100);
s.text(50, 50, store.name);
// Use more graphics here.
var marker = new SlidingMarker(
  position: lat: store.lat, lng: store.lng,
  map: $scope.map,
  label: store.name, // you do not need this
  title: store.name, // nor this
  duration: 2000,
  icon: s.toDataURL()
);

【讨论】:

【参考方案7】:

这个怎么样? (2015 年)

1) 获取自定义标记图像。

var imageObj = new Image();
    imageObj.src = "/markers/blank_pin.png"; 

2) 在RAM 中创建一个canvas 并在其上绘制此图像

imageObj.onload = function()
    var canvas = document.createElement('canvas');
    var context = canvas.getContext("2d");
    context.drawImage(imageObj, 0, 0);

3) 在上面写任何东西

context.font = "40px Arial";
context.fillText("54", 17, 55);

4) 从画布中获取原始数据并将其提供给 Google API 而不是 URL

var image = 
    url: canvas.toDataURL(),
 ;
 new google.maps.Marker(
    position: position,
    map: map,
    icon: image
 );

完整代码:

function addComplexMarker(map, position, label, callback)
    var canvas = document.createElement('canvas');
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.src = "/markers/blank_pin.png";
    imageObj.onload = function()
        context.drawImage(imageObj, 0, 0);

        //Adjustable parameters
        context.font = "40px Arial";
        context.fillText(label, 17, 55);
        //End

        var image = 
            url: canvas.toDataURL(),
            size: new google.maps.Size(80, 104),
            origin: new google.maps.Point(0,0),
            anchor: new google.maps.Point(40, 104)
        ;
        // the clickable region of the icon.
        var shape = 
            coords: [1, 1, 1, 104, 80, 104, 80 , 1],
            type: 'poly'
        ;
        var marker = new google.maps.Marker(
            position: position,
            map: map,
            labelAnchor: new google.maps.Point(3, 30),
            icon: image,
            shape: shape,
            zIndex: 9999
        );
        callback && callback(marker)
    ;
);

【讨论】:

这是一个很好的解决方案,但我必须补充一点,使用 imageObj.onload 是异步的,并且可能会在循环中导致一些问题。一种解决方法是将 png 加载到浏览器中并使用开发人员工具选择图像数据(使用 Ctrl A)。然后只需将 imageObj.src 设置为 "data:image/png;base64,paste_the_really_long_image_data_string_here";这种方式可以避免使用onload函数,而且速度更快。 性能怎么样?它将如何在有 200 个标记的地图上运行?【参考方案8】:

我使用类似于@ZuzEL 的解决方案做到了这一点。

不使用默认解决方案 (http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000),您可以使用 JavaScript 随意创建这些图像,无需任何服务器端代码。

Google google.maps.Marker 接受 Base64 作为其图标属性。有了这个,我们可以从 SVG 创建一个有效的 Base64。

您可以在此 Plunker 中看到生成与此图像相同的代码:http://plnkr.co/edit/jep5mVN3DsVRgtlz1GGQ?p=preview

var markers = [
  [1002, -14.2350040, -51.9252800],
  [2000, -34.028249, 151.157507],
  [123, 39.0119020, -98.4842460],
  [50, 48.8566140, 2.3522220],
  [22, 38.7755940, -9.1353670],
  [12, 12.0733335, 52.8234367],
];

function initializeMaps() 
  var myLatLng = 
    lat: -25.363,
    lng: 131.044
  ;

  var map = new google.maps.Map(document.getElementById('map_canvas'), 
    zoom: 4,
    center: myLatLng
  );

  var bounds = new google.maps.LatLngBounds();

  markers.forEach(function(point) 
    generateIcon(point[0], function(src) 
      var pos = new google.maps.LatLng(point[1], point[2]);

      bounds.extend(pos);

      new google.maps.Marker(
        position: pos,
        map: map,
        icon: src
      );
    );
  );

  map.fitBounds(bounds);


var generateIconCache = ;

function generateIcon(number, callback) 
  if (generateIconCache[number] !== undefined) 
    callback(generateIconCache[number]);
  

  var fontSize = 16,
    imageWidth = imageHeight = 35;

  if (number >= 1000) 
    fontSize = 10;
    imageWidth = imageHeight = 55;
   else if (number < 1000 && number > 100) 
    fontSize = 14;
    imageWidth = imageHeight = 45;
  

  var svg = d3.select(document.createElement('div')).append('svg')
    .attr('viewBox', '0 0 54.4 54.4')
    .append('g')

  var circles = svg.append('circle')
    .attr('cx', '27.2')
    .attr('cy', '27.2')
    .attr('r', '21.2')
    .style('fill', '#2063C6');

  var path = svg.append('path')
    .attr('d', 'M27.2,0C12.2,0,0,12.2,0,27.2s12.2,27.2,27.2,27.2s27.2-12.2,27.2-27.2S42.2,0,27.2,0z M6,27.2 C6,15.5,15.5,6,27.2,6s21.2,9.5,21.2,21.2c0,11.7-9.5,21.2-21.2,21.2S6,38.9,6,27.2z')
    .attr('fill', '#FFFFFF');

  var text = svg.append('text')
    .attr('dx', 27)
    .attr('dy', 32)
    .attr('text-anchor', 'middle')
    .attr('style', 'font-size:' + fontSize + 'px; fill: #FFFFFF; font-family: Arial, Verdana; font-weight: bold')
    .text(number);

  var svgNode = svg.node().parentNode.cloneNode(true),
    image = new Image();

  d3.select(svgNode).select('clippath').remove();

  var xmlSource = (new XMLSerializer()).serializeToString(svgNode);

  image.onload = (function(imageWidth, imageHeight) 
    var canvas = document.createElement('canvas'),
      context = canvas.getContext('2d'),
      dataURL;

    d3.select(canvas)
      .attr('width', imageWidth)
      .attr('height', imageHeight);

    context.drawImage(image, 0, 0, imageWidth, imageHeight);

    dataURL = canvas.toDataURL();
    generateIconCache[number] = dataURL;

    callback(dataURL);
  ).bind(this, imageWidth, imageHeight);

  image.src = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]2)/g, function(match, p1) 
    return String.fromCharCode('0x' + p1);
  ));


initializeMaps();
#map_canvas 
  width: 100%;
  height: 300px;
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    
  </head>

  <body>
    <div id="map_canvas"></div>
  </body>
  
  <script src="script.js"></script>

</html>

在这个演示中,我使用 D3.js 创建了 SVG,然后将 SVG 转换为 Canvas,因此我可以根据需要调整图像大小,然后从 canvas 的 toDataURL 方法中获取 Base64。

所有这些演示都是基于我的同事 @thiago-mata 代码。为他点赞。

【讨论】:

谢谢。这在 Firefox 中不起作用,我在 plnkr.co/edit/CiHVNYGXRqa8pHhy4eDY?p=preview 中修复了这个问题 - 需要在 d3 svg 处定义宽度和高度。 @estevao_lucas 或 @Arie 解决方案在 IE11 中都不起作用。 “SecurityError”上线:dataURL = canvas.toDataURL(); 你是对的。我个人最终使用了不同的方法。我只是在自定义标记上放置了一个带有背景图像的 div:developers.google.com/maps/documentation/javascript/… 添加一个 52kb 的 js 文件只是为了添加地图标记......耶稣【参考方案9】:

以下是具有更新“视觉刷新”样式的自定义图标,您可以通过简单的 .vbs 脚本快速生成这些图标。我还包括一个大型预生成集,您可以立即使用它并使用多种颜色选项:https://github.com/Concept211/Google-Maps-Markers

链接到 GitHub 托管的图像文件时使用以下格式:

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_[color][character].png

颜色 红、黑、蓝、绿、灰、橙、紫、白、黄

角色 A-Z, 1-100, !, @, $, +, -, =, (%23 = #), (%25 = %), (%26 = &), (空白 = •)

示例:

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red1.png

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue2.png

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green3.png

【讨论】:

【参考方案10】:

您可以在 google-maps-utility-library-v3 中使用 Marker With Label 选项。

请参考https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

【讨论】:

【参考方案11】:

基于@dave1010 答案,但更新了https 链接。

编号标记:

https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

文本标记:

https://chart.googleapis.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|Marker

【讨论】:

【参考方案12】:

您可能希望从本网站提供的来源下载一组带编号的图标:

Google Marker Icons

那么你应该能够做到以下几点:

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Demo</title> 
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
    function initialize() 

      var myOptions = 
        zoom: 11,
        center: new google.maps.LatLng(-33.9, 151.2),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      

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

      var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
      ];

      for (var i = 0; i < locations.length; i++) 
          var image = new google.maps.MarkerImage('marker' + i + '.png',
                      new google.maps.Size(20, 34),
                      new google.maps.Point(0, 0),
                      new google.maps.Point(10, 34));

          var location = locations[i];
          var myLatLng = new google.maps.LatLng(location[1], location[2]);
          var marker = new google.maps.Marker(
              position: myLatLng,
              map: map,
              icon: image,
              title: location[0],
              zIndex: location[3]
          );
      
    
    </script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize();"> 
    <div id="map" style="width:400px; height:500px;"></div> 
</body> 
</html>

上例截图:

请注意,您可以轻松地在标记后面添加阴影。您可能需要查看Google Maps API Reference: Complex Markers 上的示例以获取更多信息。

【讨论】:

我想在顶部添加文字,而不仅仅是使用编号的图像。这可能吗?【参考方案13】:

这就是我在 V3 中的做法:

我首先加载 google maps api,然后在回调方法 initialize() 中加载 MarkerWithLabel.js 我发现 here:

function initialize() 

            $.getScript("/js/site/marker/MarkerWithLabel.js#applicationBean.version", function()

            var mapOptions = 
                zoom: 8,
                center: new google.maps.LatLng(currentLat, currentLng),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false,
                mapTypeControl: false
            ;

            var map = new google.maps.Map(document.getElementById('mapholder'),
                    mapOptions);

            var bounds = new google.maps.LatLngBounds();

            for (var i = 0; i &lt; mapData.length; i++) 
                createMarker(i+1, map, mapData[i]); <!-- MARKERS! -->
                extendBounds(bounds, mapData[i]);
            
            map.fitBounds(bounds);
            var maximumZoomLevel = 16;
            var minimumZoomLevel = 11;
            var ourZoom = defaultZoomLevel; // default zoom level

            var blistener = google.maps.event.addListener((map), 'bounds_changed', function(event) 
                if (this.getZoom(map.getBounds) &gt; 16) 
                    this.setZoom(maximumZoomLevel);
                
                google.maps.event.removeListener(blistener);
            );
            );
        

        function loadScript() 
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places&amp;sensor=false&amp;callback=initialize";
            document.body.appendChild(script);
        

        window.onload = loadScript;

    </script> 

然后我使用createMarker() 创建标记:

function createMarker(number, currentMap, currentMapData) 

   var marker = new MarkerWithLabel(
       position: new google.maps.LatLng(currentMapData[0], currentMapData[1]),
                 map: currentMap,
                 icon: '/img/sticker/empty.png',
                 shadow: '/img/sticker/bubble_shadow.png',
                 transparent: '/img/sticker/bubble_transparent.png',
                 draggable: false,
                 raiseOnDrag: false,
                 labelContent: ""+number,
                 labelAnchor: new google.maps.Point(3, 30),
                 labelClass: "mapIconLabel", // the CSS class for the label
                 labelInBackground: false
                );
            

由于我向标记添加了 ma​​pIconLabel 类,因此我可以在我的 css 中添加一些 css 规则:

.mapIconLabel 
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    font-family: 'DINNextRoundedLTProMediumRegular';

结果如下:

【讨论】:

致多年后发现的人们:google-maps-utility-library-v3.googlecode.com/svn/tags/… 对我认为相同的源代码进行了多次修订。 v1.1.5 对我有用,但 v1.1.9 没有,如果上述方法不起作用,也许尝试旧版本。感谢 Jakob 提供的信息 在使用自定义标签位置向地图添加大量标记时,我遇到了 MarkerWithLabel 问题。【参考方案14】:

不幸的是,这并不容易。您可以基于 OverlayView 类 (an example) 创建您自己的自定义标记,并将您自己的 HTML 放入其中,包括一个计数器。这将为您留下一个非常基本的标记,您无法轻松拖动或添加阴影,但它是非常可定制的。

或者,您也可以add a label to the default marker。这将不太可定制,但应该可以工作。它还保留了标准标记所做的所有有用的事情。

您可以在 Google 的文章 Fun with MVC Objects 中阅读有关叠加层的更多信息。

编辑:如果您不想创建 JavaScript 类,可以使用Google's Chart API。例如:

编号标记:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

文本标记:

http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo

这是一种快速简便的方法,但它的可定制性较差,并且需要客户端为每个标记下载一个新图像。

【讨论】:

使用 Charts API 是我的首选方法。 你有快速创建 1000 个带编号的图标的方法吗? 请注意,Charts API 计划在 2015 年 4 月折旧 - 所以大约需要 6 个月。 您的意思是“已弃用”。否则人们找不到这个词 需要明确的是,整个 Google Carts API 并没有被弃用,只是图像图表和信息图表工具。但正如约翰所提到的,这个答案无论如何都会在 3.21 版本中过时。请参阅约翰的回答。【参考方案15】:

我的两分钱展示了如何使用Google Charts API 来解决这个问题。

【讨论】:

聪明!我已经有了编号的图像,但我非常喜欢这种方法。 这就是为什么你需要在回答时将代码的解决方案复制到答案框中。【参考方案16】:

如果您有一些编程技能,在服务器端生成带标签的图标是非常可行的。除了 php,您还需要服务器上的 GD 库。几年来一直为我工作得很好,但要让图标图像同步确实很棘手。

我通过 AJAX 发送几个参数来定义空白图标、文本和颜色以及要应用的 bgcolor。这是我的 PHP:

header("Content-type: image/png");
//$img_url = "./icons/gen_icon5.php?blank=7&text=BB";

function do_icon ($icon, $text, $color) 
$im = imagecreatefrompng($icon);
imageAlphaBlending($im, true);
imageSaveAlpha($im, true);

$len = strlen($text);
$p1 = ($len <= 2)? 1:2 ;
$p2 = ($len <= 2)? 3:2 ;
$px = (imagesx($im) - 7 * $len) / 2 + $p1;
$font = 'arial.ttf';
$contrast = ($color)? imagecolorallocate($im, 255, 255, 255): imagecolorallocate($im, 0, 0, 0); // white on dark?

imagestring($im, $p2, $px, 3, $text, $contrast);    // imagestring  ( $image, $font, $x, $y, $string, $color)

imagepng($im);
imagedestroy($im);

$icons =   array("black.png", "blue.png", "green.png", "red.png", "white.png", "yellow.png", "gray.png", "lt_blue.png", "orange.png");      // 1/9/09
$light =   array( TRUE,         TRUE,       FALSE,       FALSE,     FALSE,      FALSE,      FALSE,          FALSE,      FALSE);     // white text?

$the_icon = $icons[$_GET['blank']];             // 0 thru 8 (note: total 9)
$the_text = substr($_GET['text'], 0, 3);        // enforce 2-char limit
do_icon ($the_icon, $the_text,$light[$_GET['blank']] ); 

它通过以下方式在客户端调用: var image_file = "./our_icons/gen_icon.php?blank=" + escape(icons[color]) + "&text=" + iconStr;

【讨论】:

这实际上并不是一个糟糕的解决方案。在我们的设置中生成每个标记只需要大约 30 毫秒。感谢分享。【参考方案17】:

我没有足够的声誉来评论答案,但想指出 Google Chart API 已被弃用。

来自API homepage:

谷歌图表工具的信息图表部分已正式发布 自 2012 年 4 月 20 日起已弃用。

【讨论】:

Google Chart API没有被弃用,只有图像图表和信息图表工具。这可能已被 dave1010 的回答所使用,但无论如何,最新的 Google 地图现在为您提供了更好的解决方案(请参阅约翰的回答)。

以上是关于如何在 Google Maps V3 中创建编号的地图标记?的主要内容,如果未能解决你的问题,请参考以下文章

Google Maps API v3 中的 Javascript 错误 (RefererDeniedMapError)

如何在 Google Maps V3 上居中和缩放多个标记

如何在 Google Maps V3 上触发标记的 onclick 事件?

如何在 Google Maps V3 中永久显示标记的标签/标题?

Google Maps API v3 - 如何清除叠加层?

Google Maps Api v3 - 如何删除集群图标?