2012-10-22 88 views
0

我有一個非常遠離另一個標記的地圖,爲了不會縮小太多,我需要爲全尺寸的地圖製作一個頁面,並且我想在地圖之間動態更改,以便用戶不需要必須更改爲額外的窗口才能看到其他位置。這是我想如何做到這一點的圖像。我非常感謝所有人的幫助和經驗。如何通過點擊Google Maps API V3在兩個地圖之間切換?

這是js代碼。

(function() { 

window.onload = function() { 

    // Creating a new map 
    var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(10.2000, -84.4000), 
     disableDefaultUI: false, 
     scrollwheel: false, 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 


    // Creating the JSON data 
    var json = [ 
     { 
      "title": "map 1", 
      "lat": 9.93379260367826, 
      "lng": -84.22572178326419, 
      "description": "<br><br><strong>map 1</strong>Description<br><br>" 
     }, 
     { 
      "title": "map 2", 
      "lat": 10.575049399803566, 
      "lng": -85.58282425643927, 
      "description": "<br><br><strong>map 2</strong>Description<br><br>" 
     }, 
    ] 

    // Creating a global infoWindow object that will be reused by all markers 
    var infoWindow = new google.maps.InfoWindow(); 

    // Looping through the JSON data 
    for (var i = 0, length = json.length; i < length; i++) { 
     var data = json[i], 
      latLng = new google.maps.LatLng(data.lat, data.lng); 

     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      title: data.title, 
      icon: 'style/images/mapMarker.png' 
     }); 



     // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) 
     (function(marker, data) { 

      // Attaching a click event to the current marker 
      google.maps.event.addListener(marker, "click", function(e) { 
       infoWindow.setContent(data.description); 
       infoWindow.open(map, marker); 
      }); 


     })(marker, data); 

    } 

} 
    })(); 

Two maps in full window size change to each other on click.

+0

您發佈的代碼不會嘗試執行您的問題描述。請張貼與問題相關的代碼。 – Marcelo

回答

0

有兩個選項卡或鏈接,點擊它呼叫一個JavaScript功能,簡單地做map.setCenter();與座標標記1或2的標記在適當的時候。

+0

^如果你不需要以不同的方式設計地圖,這將是最簡單的方法。閱讀文檔的[自定義控件](https://developers.google.com/maps/documentation/javascript/controls#CustomControls)部分。 – Labu

相關問題