google-maps - 谷歌地图 API V3 : How to jump to a specific marker from outside the map?

标签 google-maps google-maps-api-3

我有一张 map ,上面有两个标记。

map 的初始 View 仅显示一个标记,我想在 map 旁边提供一个链接,单击该链接会将 map 移动到第二个标记。

这是我想要的演示,使用 API 的 v2:http://arts.brighton.ac.uk/contact-university-of-brighton-faculty-of-arts (注意 map 下方的链接)

这是我到目前为止所拥有的:

    <script type="text/javascript">
      function initialize() {
        var latlng = new google.maps.LatLng(50.823817, -0.135634);
        var myOptions = {
          zoom: 13,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,  
          mapTypeControlOptions: {  
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU  
              }  ,
              scaleControl: false
          };

        var map = new google.maps.Map(document.getElementById("map"), myOptions);

    // 1st marker  
    var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(50.823817, -0.135634), map: map, title: 'my title' });
    var infowindow = new google.maps.InfoWindow({ content: 'my window content' }); 
    google.maps.event.addListener(marker1, 'click', function() { infowindow.open(map, marker1); }); 

    // 2nd marker  
    var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'});
    var infowindow2 = new google.maps.InfoWindow({ content: 'content for my 2nd window' }); 
    google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map, marker2); }); 
    }
    </script>

所以我想添加一个指向marker2 的链接。 ,将 map 向上移动 50 多英里,
例如<a href="#marker2">Second location</a> .

我该怎么做?

最佳答案

使用addDomListener向链接添加点击事件,将 map 移动到该标记(您还需要向链接标签添加一个 id,以便您可以在代码中引用它):

编辑:在初始化函数中设置事件:

<head>
  <script type="text/javascript"> 
    function initialize() {
      var myLatlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'});
      google.maps.event.addDomListener(document.getElementById("linkID"), "click", function(ev) {
        map.setCenter(marker2.getPosition());
      }
    }
  </script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
  <a href="javascript:function() { return false; }" id="location2">Second place</a>
  <div id="map_canvas" style="width:100%; height:100%"></div> 
</body>

关于google-maps - 谷歌地图 API V3 : How to jump to a specific marker from outside the map?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2792698/

相关文章:

ios - 如何在MapView ios9中绘制PolyLine

google-maps - 如何使用GDAL从tiff和4个角纬度和经度创建geotiff

android - 停止使用谷歌地图 fragment 的位置

javascript - Google Maps API 必须单击标记两次才能动态显示图像

javascript - 如何对 Google Maps API 进行跨域 AJAX 调用?

android - HTTP 引荐来源网址是否适用于移动应用程序?

android - 错误膨胀类 com.readystatesoftware.maps.TapControlledMapView

javascript - 谷歌地图 KML 图层初始缩放和中心

android - 带有 iOS 和 Google 标记的 map 的 URL?

google-maps - 经纬度能查到 zip 吗?