2010-07-10 85 views
0

我正在使用谷歌地圖JavaScript API。谷歌地圖:focus/LatLng到大陸

這裏是代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
     <html> 
      <head> 
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
       <style type="text/css"> 
        body { 
         font-family: Helvetica, Arial, sans-serif; 
         font-size:10px; 
         margin:0; 
        } 
        #firstHeading { 
         font-family: Calibri; 
         font-size:12px; 
         font-weight: bold; 
         color: #0f9bec; 
        } 
        p { 
         color : #666; 
        } 
       </style> 

       <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
       <script type="text/javascript"> 
        function initialize() { 
         var latlng = new google.maps.LatLng(57.0442, 9.9116); 
         var settings = { 
          zoom: 15, 
          center: latlng, 
          mapTypeControl: true, 
          mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
          navigationControl: true, 
          navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
          mapTypeId: google.maps.MapTypeId.ROADMAP}; 
         var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 


         var companyImage = new google.maps.MarkerImage('/images/logo.png', 
          new google.maps.Size(100,50), 
          new google.maps.Point(0,0), 
          new google.maps.Point(50,50) 
         ); 

         var companyShadow = new google.maps.MarkerImage('/images/logo_shadow.png', 
          new google.maps.Size(130,50), 
          new google.maps.Point(0,0), 
          new google.maps.Point(65, 50)); 

         var companyPos = new google.maps.LatLng(57.0442, 9.9116); 

         var companyMarker = new google.maps.Marker({ 
          position: companyPos, 
          map: map, 
          icon: companyImage, 
          shadow: companyShadow, 
          title:"Høgenhaug", 
          zIndex: 3}); 

         var infoWindow = new google.maps.InfoWindow(); 
         var company='<div id="content">'+ 
          '<div id="siteNotice">'+ 
          '</div>'+ 
          '<h1 id="firstHeading" class="firstHeading">COMPANY</h1>'+ 
          '<div id="bodyContent">'+ 
          '<p>Content for company goes here.</p>'+ 
          '</div>'+ 
          '</div>'; 
          google.maps.event.addListener(companyMarker, 'click', function() { 
          infoWindow.setContent(company); 
          infoWindow.open(map, companyMarker); 
          }); 

// List Go-on for other marker 
       } 
       </script> 
      </head> 
      <body onload="initialize()"> 
       <div id="map_canvas" style="width:500px; height:300px"></div> 
      </body> 
     </html> 

我在地圖頂部有大陸的名單。

我想要的是谷歌地圖專注於大陸哪些用戶選擇。

這是我正在看的EXAMPLE

如何在上述代碼中實現此目的?

感謝

回答

3

你可以做的是,對每一個大陸的中心點。當用戶從下拉列表中選擇一個大陸時,您將不得不將地圖居中到該點。您可以使用:

map.setCenter(yourLocation); 

設置中心..我希望這可以幫助你。 yourLocation是LatLng類型的一個對象。您可以創建一個對象如下:

var yourLocation = new google.maps.LatLng(-12.461334, 130.841904); 
+1

我覺得這是更好的設置縮放爲well.Example map.setCenter(-12.461334,130.841904,10); – Luci 2011-03-28 09:21:16