草庐IT

javascript - 谷歌地图通过单击多个标记来放大标记

coder 2024-07-28 原文

我已经在 StackOverflow 和 Google 搜索中阅读了很多其他帖子，但我仍然无法使其正常工作。我认为这与我的 for 循环有关。我已经为信息窗口设置了鼠标悬停事件，但我想要的是当您单击标记并将其置于 map 中心时， map 会放大标记。我试过:

google.maps.event.addListener(marker,'click',function(e) {
                map.setZoom(9);
                map.setCenter(e.latLng);
            });

效果最好但仍然不总是以标记为中心，尤其是在多次点击之后。有时甚至看不到标记。

我真正想使用的代码片段是这样的:

// add the double-click event listener
            google.maps.event.addListener(marker, 'dblclick', function(event){
                map = marker.getMap();

                map.setCenter(overlay.getPosition()); // set map center to marker position
                smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
            })


            // the smooth zoom function
            function smoothZoom (map, max, cnt) {
                if (cnt >= max) {
                        return;
                    }
                else {
                    y = google.maps.event.addListener(map, 'zoom_changed', function(event){
                        google.maps.event.removeListener(y);
                        self.smoothZoom(map, max, cnt + 1);
                    });
                    setTimeout(function(){map.setZoom(cnt)}, 80);
                }
            }

因为它应该具有平滑缩放功能。但是我根本无法让这个工作。大多数对标记的点击会转到纽约长岛或无处可去。

我的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=(api)&sensor=false">
</script>
<script type="text/javascript">
google.maps.visualRefresh = true;

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(42, -97),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var jobs = [
        ['Taylor', 'Texas', 30.570155, -97.409649, 'machine install and training'],
        ['Fort Riley', 'Kansas', 39.104172, -96.735558, 'machine install and training'],
        ['Toronto', 'Ontario, Canada', 43.653226, -79.383184, 'machine install and training'],
        ['Spokane', 'Washington', 47.658780, -117.426047, 'Machine install and training'],
        ['New Paris', 'Indiana', 41.504848, -85.826487, 'machine install'],
        ['Charleston', 'Mississippi', 34.00711, -90.055194, 'machine install and training'],
        ['Tinley Park', 'Illinois', 41.596405, -87.785119, 'training.'],
        ['Savannah', 'Georgia', 32.08078, -81.090719, 'machine install and training'],
        ['Long Island', 'New York', 40.852505, -73.135849, 'Machine install and training']
    ];

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var infoWindow = new google.maps.InfoWindow;

        for (var i = 0; i < jobs.length; i++) {
            var city = jobs[i][0];
            var state = jobs[i][1];
            var lat = jobs[i][2];
            var lng = jobs[i][3];
            var desc = jobs[i][4];
            var z = i;
            var myLatLng = new google.maps.LatLng(lat, lng);

            var content = '<div class="map-content"><h3>' + city + ', ' + state +
                 '</h3>' + desc + '</div>';

            var marker = new google.maps.Marker({
                map: map,
                title: city + state,
                position: myLatLng,
                zIndex: z
            });

            google.maps.event.addListener(marker, 'mouseover', (function(marker, content) {
                return function() {
                    infoWindow.setContent(content);
                    infoWindow.open(map, marker);
                }
            })(marker, content));

            // add the double-click event listener
            google.maps.event.addListener(marker, 'dblclick', function(event){
                map = marker.getMap();

                map.setCenter(overlay.getPosition()); // set map center to marker position
                smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
            })


            // the smooth zoom function
            function smoothZoom (map, max, cnt) {
                if (cnt >= max) {
                        return;
                    }
                else {
                    y = google.maps.event.addListener(map, 'zoom_changed', function(event){
                        google.maps.event.removeListener(y);
                        self.smoothZoom(map, max, cnt + 1);
                    });
                    setTimeout(function(){map.setZoom(cnt)}, 80);
                }
            }
        }
}

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
    <div id="map-canvas"/>
</body>
</html>

如果我删除尝试缩放点击事件的代码并将其从循环中取出，它仅适用于我的长岛标记(因为这是处理的数组中的最后信息)。任何关于如何让它在点击时以标记为中心的帮助都会很棒。我真的找不到任何在数组和循环上实现的搜索。我是 Google API 的新手，而且我只在此基础上完成了基本的 Javascript。

编辑:An example of this is here.

最佳答案

看起来你有范围问题。

试试这个作为事件监听器:

google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
});

这在这里有效:

http://jsfiddle.net/iambnz/mQEwh/

关于javascript - 谷歌地图通过单击多个标记来放大标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17775270/

javascript标记39mapfunctiongoogle-mapsgoogle-maps-api-3google-maps-markersdom-events

有关javascript - 谷歌地图通过单击多个标记来放大标记的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  2. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  3. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  4. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  5. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  6. ruby - 通过 ruby​​ 进程共享变量 - 2

    我正在编写一个gem，我必须在其中fork两个启动两个webrick服务器的进程。我想通过基类的类方法启动这个服务器，因为应该只有这两个服务器在运行，而不是多个。在运行时，我想调用这两个服务器上的一些方法来更改变量。我的问题是，我无法通过基类的类方法访问fork的实例变量。此外，我不能在我的基类中使用线程，因为在幕后我正在使用另一个不是线程安全的库。所以我必须将每个服务器派生到它自己的进程。我用类变量试过了，比如@@server。但是当我试图通过基类访问这个变量时，它是nil。我读到在Ruby中不可能在分支之间共享类变量，对吗？那么，还有其他解决办法吗？我考虑过使用单例，但我不确定这是

  7. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  8. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  9. ruby-on-rails - 在 ruby​​ .gemspec 文件中，如何指定依赖项的多个版本？ - 2

    我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作，我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容，因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表？~>3.0还是~>4.0？ 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本，你可以这

  10. ruby-on-rails - Enumerator.new 如何处理已通过的 block ？ - 2

    我在理解Enumerator.new方法的工作原理时遇到了一些困难。假设文档中的示例:fib=Enumerator.newdo|y|a=b=1loopdoy[1,1,2,3,5,8,13,21,34,55]循环中断条件在哪里，它如何知道循环应该迭代多少次(因为它没有任何明确的中断条件并且看起来像无限循环)？ 最佳答案 Enumerator使用Fibers在内部。您的示例等效于:require'fiber'fiber=Fiber.newdoa=b=1loopdoFiber.yieldaa,b=b,a+bendend10.times.m

随机推荐