通过数组

时间:2016-12-25 11:01:27

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

我已经通过Google Map Js API加载了地图和几个标记。到目前为止,我的代码如下所示:

  var mapCenter = {lat: 10.0268196, lng: 76.3080968};

  var locations = [

     [ 'Malabar Gold',  10.02695298, 76.30807266],  
     [ 'Sky Jewellery', 10.0268196,  76.3080968],  
     [ 'Gilli',  10.02676809, 76.3081786],  
     [ 'Mark & Spencer',  10.02667433, 76.30830199],  
     [ 'Dar Optics',  10.02626758, 76.30800158]  
  ];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 28,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow()
var marker, i;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: locations[i][4],
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);

           }
    })(marker, i));
 }

然后在某些事件中,我想突出显示一个标记(从数组中添加的图标),周围有一个圆圈,如下面的代码所示。但是在下面的代码中,圆圈总是围绕着添加到地图的最后一个标记(循环中数组的最后一个坐标)。我需要一种方法来选择我想要的任何标记,方法是使用i(索引)值或数组中的某些内容,例如第二个标记或第三个标记,并以编程方式在其周围添加一个圆圈而不是最后一个一。

var circle = new google.maps.Circle({
  map: map,
  radius: 2.5,    // 10 miles in metres
  fillColor: '#4A90E2',
  strokeColor: '#2577D6',
  strokeOpacity: 0.9,
  strokeWeight: 1,        
});

circle.bindTo('center', marker[1], 'position');

2 个答案:

答案 0 :(得分:2)

  1. 将您的标记存储在数组中,以便您可以在创建后访问它们
  2. 将圆圈添加到该阵列中指定的google.maps.Marker
  3. for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            icon: locations[i][4],
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
    
               }
        })(marker, i));
        markers.push(marker);
     }
    

    稍后在(例如)点击事件中添加圆圈:

    google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
      var circle = new google.maps.Circle({
        map: map,
        radius: 2.5,    // 10 miles in metres
        fillColor: '#4A90E2',
        strokeColor: '#2577D6',
        strokeOpacity: 0.9,
        strokeWeight: 1,        
      });
      circle.bindTo('center', markers[document.getElementById('markerNum').value], 'position');
    })
    

    proof of concept fiddle

    代码段

    var geocoder;
    var map;
    var markers = [];
    
    function initialize() {
      var mapCenter = {
        lat: 10.0268196,
        lng: 76.3080968
      };
      var bounds = new google.maps.LatLngBounds();
      var locations = [
    
        ['Malabar Gold', 10.02695298, 76.30807266],
        ['Sky Jewellery', 10.0268196, 76.3080968],
        ['Gilli', 10.02676809, 76.3081786],
        ['Mark & Spencer', 10.02667433, 76.30830199],
        ['Dar Optics', 10.02626758, 76.30800158]
      ];
    
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 28,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
    
      var infowindow = new google.maps.InfoWindow()
      var marker, i;
    
      for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          icon: locations[i][4],
          map: map
        });
        bounds.extend(marker.getPosition());
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
    
          }
        })(marker, i));
        markers.push(marker);
      }
      map.fitBounds(bounds);
      google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
        var circle = new google.maps.Circle({
          map: map,
          radius: 2.5, // 10 miles in metres
          fillColor: '#4A90E2',
          strokeColor: '#2577D6',
          strokeOpacity: 0.9,
          strokeWeight: 1,
        });
    
        circle.bindTo('center', markers[document.getElementById('markerNum').value], 'position');
      })
    }
    google.maps.event.addDomListener(window, "load", initialize);
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <input id="markerNum" value="1" />
    <input id="btn" value="click" type="button" />
    <div id="map"></div>

答案 1 :(得分:1)

您在for循环的每次迭代中都会覆盖标记变量,因此不是

marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: locations[i][4],
    map: map
});

marker.push(new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: locations[i][4],
    map: map
}));
google.maps.event.addListener(marker[i], 'click', (function (marker, i) {
    return function () {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);

       }
})(marker[i], i));