how to add numbering on each markers in Google map

2019-05-15 07:11发布

站内问答 / JavaScript
1971 2 4

I want to ask you all about how to add number dynamically on each markers in Google Maps v3 with JavaScript. For example, the first marker is 1, the second one is 2, etc. In this case I have position data like this : 

[
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(1.3667, 103.8000), 
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(51.0000, 9.0000),
 new google.maps.LatLng(51.0000, 9.0000),
 new google.maps.LatLng(51.5142, -0.0931),
 new google.maps.LatLng(51.5142, -0.0931),
 new google.maps.LatLng(54.0000, -2.0000),
 new google.maps.LatLng(51.6000, -1.2500),
 new google.maps.LatLng(51.7500, -1.2500)
];

But that data dynamically change. So for the first position lat/long I will give the number 1 on first marker, number 2 for the second marker, etc. And also i have use the icon each marker with this :

"http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900"

Do I have to change the marker icon? I really need your suggest or example code to fix the problem. Please help. Thank You very much for the help.

2条回答
Lonely孤独者°
2楼-- · 2019-05-15 08:01

You can keep your starred pin icon and add an unobtrusive label next to it. This label can say anything but I kept it to simply a number. It is the MarkerWithLabel library (download here)

DEMO http://jsfiddle.net/yV6xv/21/

pin with number

You need to define a CSS for it too.

  .labels {
     color: blue;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     width: 25px;
     border: 1px solid black;
     white-space: nowrap;
   }
​

And replace your regular Marker with MarkerWithLabel:

for (var i = 0; i < point.length; i++) {
    var marker = new MarkerWithLabel({
        map: map,
        position: point[i],
        icon: pinImage,
        shadow: pinShadow,
        labelContent: i,
        labelAnchor: new google.maps.Point(12, -5),
        labelClass: "labels"
    });
}

Including in the HTML file

  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
      .labels {
        color: blue;
        background-color: white;
        font-family: "Lucida Grande", "Arial", sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        width: 25px;
        border: 1px solid black;
        white-space: nowrap;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>

    <script type="text/javascript">
      var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };
      ...
查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
3楼-- · 2019-05-15 08:11

You can do this in multiple ways. Changing the marker image is one, but requires you to make all those marker images. Another is to use the StyledMarker library which is part of the Google Maps API Utility Library.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)