个人中心
gpt4 book ai didi

google-maps-api-3 - Google Maps API v3 在特定缩放级别以下打开标记

转载 作者：行者123 更新时间：2023-12-02 00:09:25 27 4
gpt4 key购买 nike

我是 super 新手，需要一些项目帮助。由于我对 html 和 javascript 的了解有限，我能够制作包含多个位置的谷歌地图。这是我的代码(如果它不好，请原谅我，但它有效):

<!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>

我真正想做的是让标记只在更近的缩放级别出现。拉远时我不需要它们。如果他们在我接近时出现，那就完美了。

最佳答案

我想你必须像这样绑定(bind) zoom_changed 事件

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
    }
});

编辑

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-3 - Google Maps API v3 在特定缩放级别以下打开标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16245044/

27 4 0
文章推荐： regex - 如何用正则表达式替换 elisp 函数中的字符串？
文章推荐： content-management-system - Sitecore - 访问内容项时出现服务器错误(蓝屏死机)
文章推荐： c - 包含未使用的 header 是否对代码有任何影响？
文章推荐： Emacs:仅加载必要的 yasnippets
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com