我已经通过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');
答案 0 :(得分:2)
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');
})
代码段
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));