2012-06-14 75 views
0

我想要使用Google Mps API在this post之后得到两个位置之间的距离。我也发现了following example使用谷歌地图API v3

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

任何人都可以让我知道任何链接,其中的例子已被指示为谷歌地图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> 
+0

您是否正在加载谷歌地图API? – jbrtrnd

回答

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> 

此外,包括谷歌地图API

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

您还可以使用jQuery从谷歌CDN

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

试试让你知道一会儿。谢谢.... – Rajeev