使用谷歌地图 API v3答案

【问题标题】：Using google maps API v3使用谷歌地图 API v3
【发布时间】：2012-06-14 08:11:27
【问题描述】：

我正在尝试使用this post 之后的 Google Mps API 获取两个位置之间的距离。我还找到了following example。

我已经集成了相同的代码，但没有看到任何结果。我在这里做错了什么？

谁能告诉我任何链接，其中已为 Google Maps APIv3 指明了示例？

  <html>
  <head>
  <style>
  h1{
      font-family:arial,helvetica,sans-serif;
      font-size:20px;
      font-weight:bold;
  }
  p{
      font-family:arial,helvetica,sans-serif;
  }
  </style>
  <script include="/home/rajeev/Desktop/ge/jquery-1.7.2.js"></script>
  <script>
  var map;
      var marker, marker2;
      function initialize() {
          var mapDiv = document.getElementById('map-canvas');
          map = new google.maps.Map(mapDiv, {
              center: new google.maps.LatLng(-36.86501268451408, 174.723858833313),
              zoom: 16,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          });
      }

      $(function() {
          initialize();

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

         //Geocode the first address
         geocoder.geocode({
            address : '27 West View Road Westmere Auckland New Zealand',
            region: 'no'
         }, function(results, status){
            //Create the first marker
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                map: map,
            });

            //Now geocode the second address
            geocoder.geocode({
              address : '37 Old Mill Road Westmere Auckland New Zealand',
              region: 'no'
            }, function(results, status){
              //Create the second marker
              marker2 = new google.maps.Marker({
                  position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                  map: map,
              });

              //Now create the line (we have both markers at this point guaranteed)
              var line = new google.maps.Polyline({
                path: new Array(marker.getPosition(),marker2.getPosition()),
                strokeColor: '#ff0000',
                strokeOpacity: 1.0,
                strokeWeight: 2
              });

              line.setMap(map);

              //Now calculate the distance
              var R = 6371; // km
              var dLat = (marker.getPosition().lat() - marker2.getPosition().lat()).toRad();
              var dLon = (marker.getPosition().lng()- marker2.getPosition().lng()).toRad();
              var lat1 = marker2.getPosition().lat().toRad();
              var lat2 = marker.getPosition().lat().toRad();
              var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
              var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
              var distance = Math.ceil(R * c * 1000);
                $('p').html('The distance between the two addresses is:' + distance +'m');  
            });
         });
      });

    if (typeof(Number.prototype.toRad) === "undefined") {
      Number.prototype.toRad = function() {
        return this * Math.PI / 180;
      }
    }


  </script>
  </head>
  <body>

  <h1>Distance polyline between two street addresses</h1>
  <hr/>
  <p>
      </p>
  <hr/>
  <div id="map-canvas" style="width:500px;height:500px"></div>
  </body>

【问题讨论】：

你在加载谷歌地图 API 吗？

标签： jquery html css google-maps google-maps-api-3

【解决方案1】：

这是不对的

<script include="/home/rajeev/Desktop/ge/jquery-1.7.2.js"></script>

使用

<script src="/home/rajeev/Desktop/ge/jquery-1.7.2.js"></script>

另外，包括 Google Maps API

<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>

您也可以使用来自 Google CDN 的 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

【讨论】：