Maps API Javascript v3如何使用鼠標單擊加載標記

大家好，我一直在爲此工作一段時間，並且看了全部。我想用鼠標點擊按鈕加載標記，而不是加載地圖時。我需要一點點正確的方向。我正在做這個地方，所以我沒有鏈接。感謝您的幫助Maps API Javascript v3如何使用鼠標單擊加載標記

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<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; 


    function initialize() { 

     var washington = new google.maps.LatLng(47.7435, -122.1750); 

     var myOptions = { 
      zoom: 7, 
      center: washington, 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     } 

     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 


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


     boats(map, seller); 
    infowindow = new google.maps.InfoWindow({ 
       content: "loading..." 
      }); 

} 
    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); 
      }); 
     } 
    } 
</script> 
<body onLoad="initialize()"> 
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div> 
<button id="boats" onClick="boats()">Boats</button> 
</body> 
</html>

來源

2011-02-27 joe

以上功能初始化（）地說：

var map = null;

地圖在初始化之前取出VAR閱讀：

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

評論或刪除小船（地圖，賣方）;在初始化

更改按鈕包括參數小船功能：

<button id="boats" onClick="boats(map, seller);">Boats</button>

完整碼塊：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<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..." 
     }); 
} 

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); 
     }); 
    } 
} 
</script> 
<body onLoad="initialize()"> 
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div> 
<button id="boats" onClick="boats(map, seller);">Boats</button> 
</body> 
</html>

來源

2011-03-01 00:09:50

Maps API Javascript v3如何使用鼠標單擊加載標記

回答

相關問題