2010-07-10 59 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