当脚本src不同时会发生异常,代码有什么问题?

时间:2013-12-23 14:25:30

标签: javascript html google-maps

当我使用下面的代码时效果很好。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Add markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  //test for the marker
  var iconBase = 'https://maps.gstatic.com/mapfiles/markers/';
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: iconBase + 'markerA.png'
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

但是通过更改src js文件在下面的代码中发生了异常,我不知道为什么。异常代码在句子“var marker = new google.mpas.LatLng”中。任何人都可以帮助我吗?

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Add markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="http://ditu.google.cn/maps?file=api&amp;v=3&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&amp;hl=zh-CN"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  //test for the marker
  var iconBase = 'https://maps.gstatic.com/mapfiles/markers/';
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);    
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: iconBase + 'markerA.png'
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

2 个答案:

答案 0 :(得分:1)

Google Maps API v3需要sensor查询字符串参数。它出现在第一个示例中的URL中,但不在第二个示例中。

答案 1 :(得分:0)

我有正确的解决方案,但它与网址中的“传感器”不对应。问题是问题第二部分的网址不正确。网址“ditu.google.cn/maps?file=api&v=2&key=”;对于API版本2是正确的,仅通过将“v = 2”更改为“v = 3”并且出现问题就没有效果。 v3在中国的正确网址是“ditu.google.cn/maps/api/js?sensor=false”; 正确的代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Add markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="http://ditu.google.cn/maps/api/js?key=YOUR_API_KEY&sensor=false"></script> 

    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  //test for the marker
  var iconBase = 'http://maps.gstatic.com/mapfiles/markers/';
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: iconBase + 'markerA.png'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>