这个怎么样？（2015年）

Question

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

这些标记使用自定义图标，但我也想在顶部添加数字。我已经看到使用旧版本的API如何实现这一点。我怎么能在V3中做到这一点？

*注意 - 当您将鼠标悬停在标记上时，“title”属性会创建一个工具提示，但是我想要在自定义图像上方分层的内容，即使您没有悬停在它上面。

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

Answer 1

不幸的是，这并不容易。您可以根据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

这是一种快速简便的路线，但它的可定制性较低，需要客户为每个标记下载新图像。

Answer 2

这是我在V3中的方式：

我首先加载google地图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
                });
            }

由于我将 mapIconLabel 类添加到标记中，我可以在我的css中添加一些css规则：

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

结果如下：

MarkerWithIconAndLabel

Answer 3

我没有足够的声誉来评论答案，但想要注意Google Chart API已被弃用。

来自API homepage：

Google Chart Tools的Infographics部分已正式发布截至2012年4月20日已弃用。

Answer 4

您可能需要从此站点提供的来源下载一组带编号的图标：

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 Numbered Marker Icons

请注意，您可以轻松地在标记后面添加阴影。您可以查看Google Maps API Reference: Complex Markers上的示例，了解有关此内容的详细信息。

Answer 5

这已添加到Mapping文档中，不需要第三方代码。

您可以将这两个样本组合在一起：

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投票，请求取消此限制。

Answer 6

我使用类似于@ZuzEL的解决方案。

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

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

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

#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>

{{1}}

在这个演示中，我使用D3.js创建SVG，然后将SVG转换为Canvas，这样我就可以根据需要调整图像大小，之后我从canvas'toDataURL方法获得Base64。

所有这些演示都基于我的同事 @thiago-mata 代码。感谢他。

Answer 7

这个怎么样？（2015年）

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

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

2）在canvas中创建RAM并在其上绘制此图片

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

Answer 8

Google Maps版本3内置了对标记标签的支持。无需再生成您自己的图像或实施第三方课程。 Marker Labels

Answer 9

如果你有一些编程技巧，那么在服务器端生成带标签的图标是非常可行的。除了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]）+“＆amp; text =”+ iconStr;

Answer 10

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

Answer 11

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

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

Answer 12

基于@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

Answer 13

我发现了最好的方法。使用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()
});

Answer 14

最易于使用的解决方案 - 使用SVG

适用于： IE9 ， IE10 ，FF，Chrome，Safari

（如果您使用的是其他浏览器请“运行代码段”并发表评论）

除了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）

重要：使用正确的<text>标记属性。注意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" width="40" height="40" viewBox="0 0 40 40"> <defs> <rect id="path-1" width="40" height="40"/> <mask id="mask-2" width="40" height="40" 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-width="4" 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

Answer 15

也许仍然有人在寻找这些东西，但是发现Google Dynamics图标已弃用，而其他地图图标库却有点难看。

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

通过查看源代码，Google有自己的通过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”参数中的十六进制颜色代码（color参数不会像您想象的那样更改颜色），可以将“ text”值设置为任何字符串，并且您可以制作一个带有任何数字/值的漂亮圆形图标。我确定其他参数也可能有用。

一个使用这种方法的警告，谁知道Google何时将这个URL从世界上删除！

Answer 16

  $(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)
    };
  }

Answer 17

以下是具有更新的“可视刷新”样式的自定义图标，您可以通过简单的.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 =＆amp;），（空白=•）

<强>示例：

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

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

17 个答案:

这个怎么样？（2015年）

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

17 个答案:

这个怎么样？ （2015年）

这个怎么样？（2015年）