2011-08-17 86 views

回答

0

这是我回答这个问题的修改:Maps API Javascript v3 how to load markers with a mouse click

它加载与信息窗口标记的数组,并显示最后一个加入。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>boats</title> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> 
<script type="text/javascript"> 
</script> 
</head> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var infowindow = null; 
var map = null; 
function initialize() { 
    var washington = new google.maps.LatLng(47.7435, -122.1750); 
    var myOptions = { 
     zoom: 7, 
     center: washington, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    google.maps.event.addListener(map, 'click', function() { 
    infowindow.close(); 
    }); 
    infowindow = new google.maps.InfoWindow({ content: "loading..." }); 
    boats(map, seller); 
} 

var seller = [ 
['joe boat', 48.0350,-122.2570, 4, 'This is in good shape.'], 
['bobs boat', 48.7435, -122.1750, 2, 'This is in bad shape.'], 
['bubas boat', 47.3435, -122.1750, 1, 'This is in ok shape'], 
['daveys boat', 47.7435, -122.1750, 3, 'dont buy this one.'] 
]; 

function boats(map, markers) { 

    for (var i = 0; i < markers.length; i++) { 
     var seller = markers[i]; 
     var sellerLatLng = new google.maps.LatLng(seller[1], seller[2]); 
     var marker = new google.maps.Marker({ 
      position: sellerLatLng, 
      map: map, 
      title: seller[0], 
      zIndex: seller[3], 
      html: seller[4] 
     }); 
     var contentString = "content"; 
     google.maps.event.addListener(marker, "click", function() { 

      infowindow.setContent(this.html); 
      infowindow.open(map, this); 
     }); 
    } 
    // display the last marker infowindow 
    infowindow.setContent(marker.html); 
    infowindow.open(map,marker); 
} 
</script> 
<body onLoad="initialize()"> 
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div> 
</body> 
</html> 
相关问题