2010-08-24 45 views
2

任何人都可以幫忙。我有下面的代碼,它工作正常,但我想打開Goog​​le Map之外的信息窗口。如何打開谷歌地圖以外的標記信息窗口

例子:<a href='javascript:void(0)' onclick='infoopen("1")'>Marker 1</a>

JavaScript代碼:

var infowindow; 
var map; 
var mapDrawn = false; 
var hotels = []; 
var markers = []; 

Site.gmapInit = function(centerX, centerY, zoom, clustering, panoramaID) { 
    if (mapDrawn) return false; 

    var centerX  = (centerX == null) ? 27.9944 : centerX; 
    var centerY  = (centerY == null) ? -9.8437 : centerY; 
    var zoom  = (zoom == null) ? 2 : zoom; 
    var clustering = (clustering == null) ? false : clustering; 
    var panoramaID = (panoramaID == null) ? "" : panoramaID 

    var streetView = (panoramaID != ""); 

    (function() { 

     google.maps.Map.prototype.markers = new Array(); 

     google.maps.Map.prototype.addMarker = function(marker) { 
      this.markers[this.markers.length] = marker; 
     }; 

    })(); 


    var iconShape = { 
     coord: [14,0,16,1,17,2,18,3,19,4,19,5,20,6,20,7,20,8,20,9,20,10,20,11,20,12,20,13,20,14,19,15,19,16,18,17,18,18,18,19,17,20,17,21,16,22,16,23,15,24,15,25,14,26,14,27,13,28,13,29,12,30,12,31,11,32,11,33,11,34,9,34,9,33,9,32,8,31,8,30,7,29,7,28,6,27,6,26,5,25,5,24,4,23,4,22,3,21,3,20,3,19,2,18,2,17,1,16,1,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,1,5,1,4,2,3,3,2,4,1,6,0], 
     type: 'poly' 
    }; 


    var latlng = new google.maps.LatLng(centerX, centerY); 
    var mapOptions = { 
     zoom: zoom, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     streetViewControl: streetView, 
     scrollwheel: false 

    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

    // Initialize Fluster and give it an existing map 
    if (clustering) 
     var fluster = new Fluster2(map); 

    // Initialize markers for hotels 
    for (var i = 0; i < hotels.length; i++) { 
     var hotel = hotels[i]; 
     if (hotel[2] != '') { 
      var myLatLng = new google.maps.LatLng(hotel[0], hotel[1]); 
      // Add the marker to the Fluster 
      if (clustering) { 
       fluster.addMarker(createMarker(hotel, myLatLng)); 
      } else { 
       map.addMarker(createMarker(hotel, myLatLng)); 
      } 
     } 
    } 

    function createMarker(hotel, latlng, i) { 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      icon: hotel[4], 
      shape: iconShape, 
      title: hotel[2], 
      zIndex: 1 
     }); 



     google.maps.event.addListener(marker, "click", function() { 
      if (infowindow) infowindow.close(); 
      infowindow = new google.maps.InfoWindow({content: '<h5>' + hotel[2] + '</h5><a href="#hotelid' + hotel[3] + '">Book now</a>'}); 
      infowindow.open(map, marker); 
     }); 
     return marker; 
    } 







    if (clustering) { 
     // Set fluster styles for more than 0, 10, 20 and 40 markers 
     fluster.styles = { 
      0: { 
       //image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m1.png', 
       image: 'img/markers/fluster0.png', 
       textColor: '#FFFFFF', 
       width: 54, 
       height: 54 
      }, 
      10: { 
       //image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m2.png', 
       image: 'img/markers/fluster1.png', 
       textColor: '#FFFFFF', 
       width: 58, 
       height: 58 
      }, 
      20: { 
       //image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m3.png', 
       image: 'img/markers/fluster2.png', 
       textColor: '#FFFFFF', 
       width: 66, 
       height: 66 
      }, 
      40: { 
       //image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m4.png', 
       image: 'img/markers/fluster3.png', 
       textColor: '#FFFFFF', 
       width: 80, 
       height: 80 
      } 
     }; 

     // Initialize Fluster 
     // This will set event handlers on the map and calculate clusters the first time. 
     fluster.initialize(); 
    } 

    // Do we need street view? 
    if (panoramaID != '') { 
     var panoramaOptions = { 
      position: latlng, 
      pov: { 
       heading: 34, 
       pitch: 10, 
       zoom: 1 
      } 
     }; 
     var panoramaView = new google.maps.StreetViewPanorama(document.getElementById(panoramaID), panoramaOptions); 
     map.setStreetView(panoramaView); 
    } 

    mapDrawn = true; 

} 

// mapSetCenter() - Relocate/center a Google map 
Site.mapSetCenter = function(lat, lng, zoom) { 
map.setCenter(new google.maps.LatLng(lat, lng)); 
    if (zoom > 0) map.setZoom(zoom); 
} 

回答

0

我知道這是一個很古老的問題,但它有一個非常簡單的答案。標記只是對象;如果你想引用它們,你必須在某處保留指向它們的指針,例如在像Site.markers這樣的全球訪問陣列中。您可以輕鬆地把它們粘到這個陣列在創建時(設置我改變了與連字符):

// Initialize markers for hotels 
for (var i = 0; i < hotels.length; i++) { 
    var hotel = hotels[i]; 
    if (hotel[2] != '') { 
     var myLatLng = new google.maps.LatLng(hotel[0], hotel[1]); 
     // ----------------- 
     // make marker first and store a reference 
     var marker = createMarker(hotel, myLatLng); 
     Site.markers.push(marker); 
     // ----------------- 
     if (clustering) { 
      // Add the marker to the Fluster 
      fluster.addMarker(marker); 
     } else { 
      map.addMarker(marker); 
     } 
    } 
} 

然後,你需要一個簡單的方法來打開信息窗口上標記的實例,是你目前正在投入click事件。打開這個插入標記的方法可以很容易地以後稱其爲事件背景之外:

// make the method 
marker.openInfoWindow = function() { 
    if (infowindow) infowindow.close(); 
    infowindow = new google.maps.InfoWindow({content: '<h5>' + hotel[2] + '</h5><a href="#hotelid' + hotel[3] + '">Book now</a>'}); 
    infowindow.open(map, marker); 
}; 
// put the method in as a handler 
google.maps.event.addListener(marker, "click", marker.openInfoWindow); 

現在是很容易的參考標記,並調用方法:<a href='javascript:void(0)' onclick='Sites.markers[1].openInfoWindow();'>Marker 1</a>

相關問題