我写了以下代码来显示标记.有2个按钮显示下一个或上一个Infowindow标记.但问题是Info
Windows没有显示使用google.maps.event.trigger
有人可以帮我解决这个问题.谢谢.
这里是代码：
有人可以帮我解决这个问题.谢谢.
这里是代码：
<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,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.012386' lng='26.978350' phone='+902121234562' distance=''/> </markers> <input type="button" onclick="showPrevInfo()" value="prev"> <input type="button" onclick="showNextInfo()" value="next"> </body> </html>
解决方法
这是我在做什么
希望可以帮助;)
/**
* map
*/
var myLatlng = new google.maps.LatLng(39.980278,4.049835);
var myOptions = {
zoom: 10,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,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);