Question

我正在使用Google地图JavaScript API。

这是代码：

    <!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。

如何在上述代码中实现这一目标？

由于

Answer 1

你能做的是，拥有每个大陆的中心点。当用户从下拉列表中选择一个大陆时，您必须将地图居中到该点。您可以使用：

map.setCenter(yourLocation);

设置中心..我希望这可以帮到你。 yourLocation是LatLng类型的对象。您可以按如下方式创建对象：

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

谷歌地图：聚焦/ LatLng到大陆

1 个答案: