Question

我已经通过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');

Answer 1

将您的标记存储在数组中，以便您可以在创建后访问它们
将圆圈添加到该阵列中指定的google.maps.Marker

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>

Answer 2

您在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));

通过数组

2 个答案: