0

この投稿に続いて、GoogleMpsAPIを使用して2つの場所の間の距離を取得しようとしています。次の例も見つかりました。

同じコードを統合しましたが、結果が表示されません。私はここで何が間違っているのですか？

Google MapsAPIv3の例が示されているリンクを教えてください。

  <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>
4

1 に答える 1

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>

また、GoogleMapsAPIを含める

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

GoogleCDNのjQueryを使用することもできます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
于 2012-06-14T08:26:45.260 に答える