在Google地图标记的长列表中设置不同的图标

时间:2015-12-07 15:54:16

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

您好我有一张地图,其中大量标记(100)放在自定义谷歌地图上。目前,在运行lat / long循环之前设置图标。

根据下面的代码,有没有办法为几个特定位置指定不同的图标作为不同的图标?

提前致谢

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
     var mapcenter = new google.maps.LatLng(###, ###);
     var icon = { 
    url: 'URL-OF-ICON'
};
       var houses = [
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), <!-- I want these last two to be a different icon -->
new google.maps.LatLng( ###, ###)  <!-- I want these last two to be a different icon -->

      ];

      var markers = [];
      var iterator = 0;

      var map;


      function initialize() {
        var mapOptions = {
         zoom: 11,
        center: mapcenter,
        streetViewControl: false,
        mapTypeControl: false,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
       zoomControl: true,
       zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
       panControl: false
        };


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

        } 

 for (var i = 0; i < houses.length; i++) {
          setTimeout(function() {
            addMarker();
          }, i * 50);
        }

      function addMarker() {
 markers.push(new google.maps.Marker({
          icon: icon,
          position: houses[iterator],
          map: map,
          draggable: false,
          animation: google.maps.Animation.DROP
        }));
        iterator++;
      }

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


    </script>

1 个答案:

答案 0 :(得分:0)

将每个地图标记设为自己的对象

  var markerA = new google.maps.Marker({
    position: myLatLng,
    icon: url: 'images/beachball.png',
    map: map,
    title: 'Hello World!'
  });

var markerB = new google.maps.Marker({
    position: myLatLng,
    icon: url: 'images/beachflag.png',
    map: map,
    title: 'Hello World!'
  });