0

我对在我的网站中使用谷歌地图的概念相当陌生。我已经得到这个脚本来加载我网页的 div 中的特定位置。但是，所需的位置不会加载到我的页面中。

说，我想BIT Main Bldg Patna, Bihar, India 12 m E在打开页面时在 div 中加载位置。但是，结果并不准确，我们需要再放大几层。

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps Geocoding Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <script type="text/javascript"> 

   var address = 'BIT Main Bldg Patna, Bihar, India 12 m E';

   var map = new google.maps.Map(document.getElementById('map'), { 
       mapTypeId: google.maps.MapTypeId.TERRAIN,
       zoom: 8
   });

   var geocoder = new google.maps.Geocoder();

   geocoder.geocode({
      'address': address
   }, 
   function(results, status) {
      if(status == google.maps.GeocoderStatus.OK) {
         new google.maps.Marker({
            position: results[0].geometry.location,
            map: map
         });
         map.setCenter(results[0].geometry.location);
      }
      else {
         // Google couldn't geocode this request. Handle appropriately.
      }
   });

   </script> 
</body> 
</html>

BIT Main Bldg Patna, Bihar, India 12 m E通过在此页面的输出文本框中输入，您可以看到确切的期望结果。这里有什么错误？

4

3 回答 3

3

要使您的页面显示与您链接到的页面上的地图类似的地图，您需要更改您在地图构造函数中提供的选项。将属性更改zoom为 15 或 16 并更改mapTypeId为google.maps.MapTypeId.ROADMAP，您的地图将看起来更像您的想法。

于 2012-11-25T09:55:41.883 回答
1

尝试以下操作：

 var map = new google.maps.Map(document.getElementById('map'), { 
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       zoom: 15
   });
于 2012-11-25T10:01:36.033 回答
1

我会重新组织你的标记。脚本应该位于 head 部分或</body>标记之后，以便在浏览器 DOM 中正确加载所有元素后执行您的函数。

创建一个类似的函数

<script type="text/javascript"> 

function initialise()
{
   var address = 'BIT Main Bldg Patna, Bihar, India 12 m E';

   var map = new google.maps.Map(document.getElementById('map'), { 
       mapTypeId: google.maps.MapTypeId.TERRAIN,
       zoom: 10 //to get to a desirable zoom level change this value
   });

   var geocoder = new google.maps.Geocoder();

   geocoder.geocode({
      'address': address
   }, 
   function(results, status) {
      if(status == google.maps.GeocoderStatus.OK) {
         new google.maps.Marker({
            position: results[0].geometry.location,
            map: map
         });
         map.setCenter(results[0].geometry.location);
      }
      else {
         // Google couldn't geocode this request. Handle appropriately.
      }
   });
}
   </script>

然后在您的<body>标签中，您应该使用 onload 事件来执行脚本。

<body onload="initialise()">
于 2012-11-25T10:05:54.943 回答