谷歌地圖添加infowindow監聽器放大變化

我想添加一個infowindow到我已經有的每個標記，並在變焦時改變了infowindow。我曾嘗試添加標準的onclick infowindow，它的工作原理，但「zoom_changed」不起作用。谷歌地圖添加infowindow監聽器放大變化

下面是完整的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>NextNine customer map</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <META HTTP-EQUIV="Refresh" CONTENT="500"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 

     .labels { 
    color: black; 
    background-color: #6699FF; 
    font-family: "Lucida Grande", "Arial", sans-serif; 
    font-size: 10px; 
    font-weight: bold; 
    text-align: center; 
    width: 100px;  
    border: 2px solid #6699FF; 
    white-space: nowrap;} 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="https://jquery-xml2json-plugin.googlecode.com/svn/trunk/jquery.xml2json.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script> 
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.0.1/src/markerwithlabel.js"></script> 
    <script> 
var markers = []; 
var map = null; 
var counter =0; 
var counter_part =0; 

var contencts = new Array(); 
contencts [0] = "NextNine89"; 
contencts [1] = "NextNine69"; 

function initialize() { 
    var chicago = new google.maps.LatLng(35.890026,-5.523652); 
    var mapOptions = { 
     zoom: 3, 
     center: chicago, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

    $.get('Customers.xml', function(xml) { 
     var jsonObj = $.xml2json(xml); 
     $.each(jsonObj.Marker, function(){ 
      var stat = this.status == "Critical" ? 'http://maps.google.com/mapfiles/ms/micons/red-dot.png' : 'http://maps.google.com/mapfiles/ms/micons/green-dot.png'; 
       var mark = { 
         title: this.title, 
         latitude: this.latitude, 
         longitude: this.longitude, 
         icon: stat 
         } 
       markers.push(mark); 
     }); 
     for(var i=0; i< markers.length; i++){ 
      var lon = markers[i].longitude; 
      var lat = markers[i].latitude; 
      var image = markers[i].icon; 
      var custname = markers[i].title; 
      PlaceMarker(lat,lon, image, custname); 
     } 
});  

function PlaceMarker(lat, lon, image, custname) { 

    var myLatlng = new google.maps.LatLng(lat,lon); 
    var marker = new MarkerWithLabel({ 
     position: myLatlng, 
     map: map, 
     icon: image, 
     labelContent: custname, 
     labelAnchor: new google.maps.Point(22, 0), 
     labelClass: "labels", // the CSS class for the label 
     labelStyle: {opacity: 0.75} 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     content: 'Site Info:'}); 

    google.maps.event.addListener(marker, 'zoom_changed', function() { 
    infowindow.open(map,marker);}); 
} 

function recenter() 
{ 
    var location = new google.maps.LatLng(markers[counter].latitude,markers[counter].longitude); 
    map.setCenter (location); 
    map.setZoom (9); 
} 

function centerback() 
{ 
    var location = new google.maps.LatLng(35.890026,-5.523652); 
    map.setCenter (location); 
    map.setZoom (3); 
} 

window.setInterval(function(){ 
    recenter(); 
    if(counter==(markers.length-1)) 
    { 
    counter=0; 
    counter_part=0; 
    centerback(); 
    } 
    else 
    { 
    if(counter_part==5) 
    { 
     centerback(); 
     counter_part=0;} 
    else 
     { 
      recenter(); 
      counter++; 
      counter_part++;} 
    } 

}, 15000); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

每x秒我放大不同的標記，當我放大我想開一個信息窗口。一旦我縮放到不同的標記，我想讓infowindow關閉。

來源

2014-03-19 David The Faiz

標記沒有'zoom_changed'事件。 Insted，將該事件綁定到地圖上。但是，這會改變您的代碼的行爲，您可能需要查看您的代碼。 – alalp

如果我將事件綁定到地圖，我是否能夠控制將打開哪個infowindow？ –

我告訴過你，你應該考慮哪些infowindows會在地圖縮放變化時打開。或者你可以更具體地告訴你想要達到的目標。 – alalp

我爲您的問題創建了一個FIDDLE。

約我做了什麼不同的，你應該做的更多一些注意事項：

你是推markers[]陣列的一些信息，但它的元素是不是谷歌地圖的標誌物。因此，最好將MarkerWithLabel對象推向該數組，因爲我們正在使用它們傳遞給infowindow open()方法。
由於我們不知道哪些標記將根據縮放信息打開，因此我製作了infowindow全局並在您的recenter()函數中動態更改其內容。
我們從數組中獲取標記對象，我們只需要在當前所選標記上顯示infowindow。因此zoom_changed事件不再需要。

在我的小提琴中，我創建了一個JSON對象，它與您從XML文件中獲得的類型相同。所以你需要修改你的$.get()方法。此外，在我的本地計算機中，此代碼沒有問題地工作，但在小提琴中，第一個標記有問題，它的中心很好聚焦，但infowindow在第二個標記的頂部打開。

來源

2014-03-20 10:58:52 alalp

谷歌地圖添加infowindow監聽器放大變化

回答

相關問題