2009-09-26 10 views
9

Ich schrieb den folgenden Code, um Markierungen anzuzeigen. Es gibt 2 Buttons, die Next oder Previous Infowindow für Marker anzeigen. Aber das Problem ist, dass InfoWindows nicht mit google.maps.event.trigger angezeigt werden. Kann mir jemand bei diesem Problem helfen. Vielen Dank. Hier ist Code:Zeige bestimmte InfoWindow in Google Map API V3

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Common Loader</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var infowindow; 
    var map; 
    var bounds; 
    var markers = []; 
    var markerIndex=0; 

    function initialize() { 
    var myLatlng = new google.maps.LatLng(41.051407, 28.991134); 
    var myOptions = { 
     zoom: 5, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     markers = document.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
     var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
            parseFloat(markers[i].getAttribute("lng"))); 
     var marker = createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("phone"), markers[i].getAttribute("distance")); 
     } 
    rebound(map); 
    } 

    function createMarker(name, latlng, phone, distance) { 
    var marker = new google.maps.Marker({position: latlng, map: map}); 

    var myHtml = "<table style='width:100%;'><tr><td><b>" + name + "</b></td></tr><tr><td>" + phone + "</td></tr><tr><td align='right'>" + distance + "</td></tr></table>"; 

    google.maps.event.addListener(marker, "click", function() { 
     if (infowindow) infowindow.close(); 
     infowindow = new google.maps.InfoWindow({content: myHtml}); 
     infowindow.open(map, marker); 
    }); 
    return marker; 
    } 

    function rebound(mymap){ 
    bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
    bounds.extend(new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")))); 
    } 
    mymap.fitBounds(bounds); 
    } 

    function showNextInfo() 
    { 
    if(markerIndex<markers.length-1) 
      markerIndex++; 
    else 
      markerIndex = 0 ; 
    alert(markers[markerIndex].getAttribute('name')); 
    google.maps.event.trigger(markers[markerIndex],"click"); 
    } 
    function showPrevInfo() 
    { 
    if(markerIndex>0) 
      markerIndex--; 
    else 
      markerIndex = markers.length-1 ; 
     google.maps.event.trigger(markers[markerIndex],'click'); 
    } 
</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:400px; height:300px"></div> 
<markers> 
<marker name='Name1' lat='41.051407' lng='28.991134' phone='+902121234561' distance=''/> 
<marker name='Name2' lat='40.858746' lng='29.121666' phone='+902121234562' distance=''/> 
<marker name='Name3' lat='41.014604' lng='28.972256' phone='+902121234562' distance=''/> 
<marker name='Name4' lat='41.' lng='26.978350' phone='+902121234562' distance=''/> 
</markers> 
<input type="button" onclick="showPrevInfo()" value="prev">&nbsp;<input type="button" onclick="showNextInfo()" value="next"> 
</body> 
</html> 

Antwort

20

das ist, wie ich es tue

hoffen, dass es helfen kann;)

/** 
    * map 
    */ 
    var myLatlng = new google.maps.LatLng(39.980278, 4.049835); 
    var myOptions = { 
    zoom: 10, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    scrollwheel: false 
    } 
var map = new google.maps.Map(document.getElementById('mapa'), myOptions); 

var infoWindow = new google.maps.InfoWindow(); 
var markerBounds = new google.maps.LatLngBounds(); 
var markerArray = []; 

function makeMarker(options){ 
    var pushPin = new google.maps.Marker({map:map}); 
    pushPin.setOptions(options); 
    google.maps.event.addListener(pushPin, 'click', function(){ 
    infoWindow.setOptions(options); 
    infoWindow.open(map, pushPin); 
    }); 
    markerArray.push(pushPin); 
    return pushPin; 
} 

google.maps.event.addListener(map, 'click', function(){ 
    infoWindow.close(); 
}); 

function openMarker(i){ 
    google.maps.event.trigger(markerArray[i],'click'); 
}; 

/** 
*markers 
*/ 
makeMarker({ 
    position: new google.maps.LatLng(39.943962, 3.891220), 
    title: 'Title', 
    content: '<div><h1>Lorem ipsum</h1>Lorem ipsum dolor sit amet<div>' 
}); 

openMarker(0); 
0

Dieser Code funktioniert nicht, weil es auslöst click Ereignis auf Das ist keine Kartenmarkierung, aber Informationen über das DOM-Element mit dem Tag .

es zum Laufen bringen Sie globale Array hinzugefügt haben, die Liste der Kartenmarkierungen enthalten: for-Schleife

var markerList = []; 

ändern initialize() Funktion in Kartenmarkierung auf dieser Liste schieben:

markerList.push(marker); 

Ändern Sie die Funktionen showNextInfo() und showPrevInfo(), um das Ereignis auf der Kartenmarkierung auszulösen:

//google.maps.event.trigger(markers[markerIndex], "click"); 
google.maps.event.trigger(markerList[markerIndex], "click");