我希望谷歌地图v3,如果你放大高于15,地图显示标记位置,但当你缩小我想隐藏标记。我找不到任何功能来做到这一点。到目前为止,对我来说没有任何作用。
所以这是我的剧本:
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(52.429236, 6.281255),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
setMarkers(map, points);
google.maps.event.addListener(map, 'zoom_changed', function()
{
if (map.getZoom() > 15) {
setMarkers(map, points);
} else {
hideMarkers(map, points);
}
});
}
var points = [
['Location 1', 52.420891, 6.280204],
['Location 2', 52.420125, 6.279131],
['Location 3', 52.420125, 6.240125]
];
function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('../images/map/beachflag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('../images/map/beachflag_shadow.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var point = locations[i];
var myLatLng = new google.maps.LatLng(point[1], point[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: point[0]
});
}
}
function hideMarkers(map, locations) {
/* Remove All Markers */
console.log("Remove All Markers");
}
</script>
请有人帮我这个吗?
答案 0 :(得分:6)
我修改了你的代码。我保留了数组中所有标记的引用。在hideMarkers中我将他们的地图设置为null以将其从地图中删除。
function initialize() {
var mapOptions = {
zoom : 15,
center : new google.maps.LatLng(52.429236, 6.281255),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var markers = setMarkers(map, access_points);
google.maps.event.addListener(map, 'zoom_changed', function() {
if (map.getZoom() > 15) {
setMarkers(map, access_points);
}
else {
hideMarkers(map, access_points, markers);
}
});
}
var access_points = [ [ 'Location 1', 52.420891, 6.280204 ], [ 'Location 2', 52.420125, 6.279131 ], [ 'Location 3', 52.420125, 6.240125 ] ];
function setMarkers(map, locations) {
var markers= [];
var image = new google.maps.MarkerImage('../images/map/beachflag.png', new google.maps.Size(20, 32), new google.maps.Point(0, 0), new google.maps.Point(0,
32));
var shadow = new google.maps.MarkerImage('../images/map/beachflag_shadow.png', new google.maps.Size(37, 32), new google.maps.Point(0, 0),
new google.maps.Point(0, 32));
var shape = {
coord : [ 1, 1, 1, 20, 18, 20, 18, 1 ],
type : 'poly'
};
for ( var i = 0; i < locations.length; i++) {
var access_point = locations[i];
var myLatLng = new google.maps.LatLng(access_point[1], access_point[2]);
var marker = new google.maps.Marker({
position : myLatLng,
map : map,
shadow : shadow,
icon : image,
shape : shape,
title : access_point[0],
zIndex : access_point[3]
});
markers.push(marker);
}
return markers;
}
function hideMarkers(map, locations, markers) {
/* Remove All Markers */
while(markers.length){
markers.pop().setMap(null);
}
console.log("Remove All Markers");
}
答案 1 :(得分:0)
最简单的方法可能是稍微修改您的代码,以便您的标记包含在setMarkers
和hideMarkers
函数都可以访问的数组中。然后,您可以使用Marker
class的setMap
方法在地图中添加/删除标记(将null
传递给setMap
以从地图中删除标记):< / p>
var markers = [];
function createMarkers(/* some args */) {
// Create your markers, and add each one to the `markers` array
}
function setMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(yourMap); //Add the marker to the map
}
}
function hideMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null); //Remove the marker from the map
}
}
此方法还意味着每次要显示时都不会重新创建所有Marker
个实例。