Google Maps API v3在特定缩放级别下方打开标记 [英] Google Maps API v3 Turn Markers On Below a certain Zoom Level
本文介绍了Google Maps API v3在特定缩放级别下方打开标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google地图多个标记< / title>
< script src =http://maps.google.com/maps/api/js?sensor=false
type =text / javascript
src =https： //maps.googleapis.com/maps/api/js?libraries=visualization&key=\"my key& sensor = false>
< / script>
< style type =text / css>
html {height：100％}
body {height：100％; margin：0px; padding：0px}
#map {height：100％}
< / style>
< / head>
< body>
< div id =map>< / div>
< script type =text / javascript>
var locations = [
[47.003088，-96.929448]，
[46.817268，-96.810024]，
[46.842064，-96.796163]，
[ 46.644816，-96.408616]，
[46.860142，-96.751281]，
[46.789894，-96.807715]，
[46.844050，-96.856140]，
[46.921464，-96.780208]，
[46.585881，-96.843754]，
[46.860947，-96.913269]，
[46.844127，-96.813441]，
[46.852872，-96.891369]，
[46.828628 ，-96.775868]
];
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：8，
center：new google.maps.LatLng（46.827 ，-96.846），
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var marker，i;
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng （位置[i] [0]，位置[i] [1]），
map：map
}）;
}
< / script>
< / body>
< / html>
我真正想要做的是让标记只在更接近的缩放级别上。放大时我不需要它们。如果他们在我接近的时候出现，那将是完美的。
解决方案
我认为您必须绑定zoom_changed事件像这样
google.maps.event.addListener（map，'zoom_changed'，function（）{
var zoom = map.getZoom（）;
if（zoom> minValue&& zoom< maxValue）{
//显示标记如果还没有的话
}
else {
//删除标记（如果已经存在的话）
}
}）;
编辑
var locations = [
[47.003088，-96.929448]，
[46.817268，-96.810024]，
[46.842064，-96.796163]，
[46.644816，-96.408616]，
[46.860142，-96.751281]，
[46.789894，-96.807715]，
[46.844050，-96.856140]，
[46.921464， - 96.780208]，
[46.585881，-96.843754]，
[46.860947，-96.913269]，
[46.844127，-96.813441]，
[46.852872，-96.891369]，
[46.828628，-96.775868]
];
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：8，
center：new google.maps.LatLng（46.827 ，-96.846），
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var markers = [];
（var i = 0; i< locations.length; i ++）{
var marker = new google.maps.Marker（{
position：new google.maps .LatLng（位置[i] [0]，位置[i] [1]），
map：map
}）;
markers.push（marker）;
}
var minValue =，maxValue =;
google.maps.event.addListener（map，'zoom_changed'，function（）{
var zoom = map.getZoom（）;
if（zoom> minValue& amp; ;& zoom< maxValue）{
for（var i = 0; i< locations.length; i ++）{
markers [i] .setMap（map）;
}
}
else {
for（var i = 0; i< locations.length; i ++）{
markers [i] .setMap（null）;
}
}
}）;
I am super green and need some help for a project. With my limited knowledge of html and javascript, I was able to make a google map with a number of locations. Here is my code (forgive me if it is bad, but it worked):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key="my key"&sensor=false">
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var locations = [
[47.003088, -96.929448],
[46.817268, -96.810024],
[46.842064, -96.796163],
[46.644816, -96.408616],
[46.860142, -96.751281],
[46.789894, -96.807715],
[46.844050, -96.856140],
[46.921464, -96.780208],
[46.585881, -96.843754],
[46.860947, -96.913269],
[46.844127, -96.813441],
[46.852872, -96.891369],
[46.828628, -96.775868]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(46.827, -96.846),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
}
</script>
</body>
</html>
What I really want to do is to have the markers come on at only a closer zoom level. I don't need them on when zoomed far out. If they came on when I was close in that would be perfect.
解决方案
I think you will have to bind on the zoom_changed event like this
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
if( zoom > minValue && zoom < maxValue) {
//show markers if not already there
}
else {
//remove markers if already there
}
});
EDIT
var locations = [
[47.003088, -96.929448],
[46.817268, -96.810024],
[46.842064, -96.796163],
[46.644816, -96.408616],
[46.860142, -96.751281],
[46.789894, -96.807715],
[46.844050, -96.856140],
[46.921464, -96.780208],
[46.585881, -96.843754],
[46.860947, -96.913269],
[46.844127, -96.813441],
[46.852872, -96.891369],
[46.828628, -96.775868]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(46.827, -96.846),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
markers.push(marker);
}
var minValue = , maxValue = ;
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
if( zoom > minValue && zoom < maxValue) {
for (var i = 0; i < locations.length; i++) {
markers[i].setMap(map);
}
}
else {
for (var i = 0; i < locations.length; i++) {
markers[i].setMap(null);
}
}
});
这篇关于Google Maps API v3在特定缩放级别下方打开标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
