計算距離和移動標記從谷歌地圖來源地

嗨，我已經創建了一個Web應用程序，我可以顯示使用谷歌V3 API和地圖上的兩個地方之間的距離，並在其他Web應用程序中創建了我可以在地圖上移動我怎麼能結合這兩個。這裏是我的代碼：計算距離和移動標記從谷歌地圖來源地

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Direction2.aspx.cs" Inherits="Direction2" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     var directionDisplay; 
     var directionsService = new google.maps.DirectionsService(); 
     function initialize() { 
      var latlng = new google.maps.LatLng(51.764696, 5.526042); 
      directionsDisplay = new google.maps.DirectionsRenderer(); 
      var myOptions = { 
       zoom: 14, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       mapTypeControl: false 
      }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      directionsDisplay.setMap(map); 
      directionsDisplay.setPanel(document.getElementById("directionsPanel")); 
      var marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       title: "My location" 
      }); 
     } 
     function calcRoute() { 
      var start = document.getElementById("routeStart").value; 
      var end = "51.764696,5.526042"; 
      var request = { 
       origin: start, 
       destination: end, 
       travelMode: google.maps.DirectionsTravelMode.DRIVING 
      }; 
      directionsService.route(request, function (response, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        directionsDisplay.setDirections(response); 
       } 
      }); 
     } 
</script> 
</head> 
<body onload="initialize()"> 

    <div id="map_canvas" style="width:710px; height:300px"></div> 
    <form action="" onsubmit="calcRoute();return false;" id="routeForm"> 
     <input type="text" id="routeStart" value=""/> 
     <input type="submit" value="Route plannen"/> 

<div id="directionsPanel"></div> 
    </form> 
</body> 
</html>

而對於動畫我用這個代碼： <％@頁面語言= 「C＃」 AutoEventWireup = 「真」的CodeFile = 「Drop.aspx.cs」繼承= 「刪除」％ >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Drop</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

     <script type="text/javascript"> 
      var stockholm = new google.maps.LatLng(59.32522, 18.07002); 
      var parliament = new google.maps.LatLng(59.327383, 18.06747); 
      var marker; 
      var map; 

      function initialize() { 
       var mapOptions = { 
        zoom: 13, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        center: stockholm 
       }; 

       map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 

       marker = new google.maps.Marker({ 
        map: map, 
        draggable: true, 
        animation: google.maps.Animation.DROP, 
        position: parliament 
       }); 
       google.maps.event.addListener(marker, 'click', toggleBounce); 
     } 

      function toggleBounce() { 

       if (marker.getAnimation() != null) { 
        marker.setAnimation(null); 
       } else { 
        marker.setAnimation(google.maps.Animation.BOUNCE); 
       } 
      } 
</script> 

</head> 
<body onload="initialize()" onunload="Gunload()"> 
    <form id="form1" runat="server"> 
    <div id="map_canvas" style="width:525px; height:237px;"> 
    </div> 
</form>

由於事先

來源

2012-12-29 amitesh

感謝您的回覆geocodezip您的回覆，但我想說明兩個城市或國家之間的位置和移動移動與標記並通過標記文本框的值改變的地方，位置還可以更改：https：//開頭maps.google.co。in/ – amitesh

你的問題不清楚。標記移動時，你想重新計算方向嗎？ –

@SeainMalkin假設我在startvalue文本框和紐約的endvalue文本框中輸入了las vagas，並在getdirection按鈕上點擊它會向我顯示兩個城市之間的方向我想要的是當我將標記從拉斯維加斯移動到chichago時，文本框文本也會更改根據我的標記。我希望我清楚，如果不是，然後讓我知道 – amitesh

要更改開始或目的地城市的名稱，當你移動標記，你需要找到方向和使用的起點和終點座標網上搜尋地理編碼器找到位置的名稱。

您需要傾聽'directions_changed'事件並查找開始和結束時間。

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
    var directions = this.getDirections(); 
    var overview_path = directions.routes[0].overview_path; 
    var startingPoint = overview_path[0]; 
    var destination = overview_path[overview_path.length - 1]; 
    if (typeof startLatlng === 'undefined' || !startingPoint.equals(startLatlng)) { 
     startLatlng = startingPoint; 
     getLocationName(startingPoint, function(name) { 
      routeStart.value = name; 
     }); 
    } 
    if (typeof endLatlng === 'undefined' || !destination.equals(endLatlng)) { 
     endLatlng = destination; 
     getLocationName(destination, function(name) { 
      routeEnd.value = name; 
     }); 
    } 
});

要得到標記位置的名稱使用下面的函數（我趕緊一起把這個，將需要更多的測試）

function getLocationName(latlng, callback) { 
    geocoder.geocode({location: latlng}, function(result, status) { 
     if (status === google.maps.GeocoderStatus.OK) { 
      var i = -1; 
      // find the array index of the last object with the locality type 
      for (var c = 0; c < result.length; c++) { 
       for (var t = 0; t < result[c].types.length; t++) { 
        if (result[c].types[t].search('locality') > -1) { 
         i = c; 
        } 
       } 
      } 
      var locationName = result[i].address_components[0].long_name; 
      callback(locationName); 
     } 
    }); 
}

通過做這種方式，你不能設置點擊應用於地圖的地圖標記，這意味着你不能讓你的標記彈跳動畫。如果你需要標記動畫，那麼你將不得不壓制指示服務中的標記並顯示你自己的標記。拖動標記時，您必須重新計算方向，然後將getLocationName函數與標記位置一起使用。

Here is a working demo.

應該足以讓你更接近你想要什麼。

編輯我更新了代碼，以便在拖動時更改開始或結束輸入框的值。

只需拖動一小段距離，標記拖動事件就會觸發數百次，因此我們需要設置一個定時器，使其不會請求多個地理編碼。

我已經把這個這裏工作演示：初始化我們需要在suppressMarkers選項傳遞

directionsDisplay = new google.maps.DirectionsRenderer({ 
    suppressMarkers: true 
});

中的DirectionsRenderer時http://jsfiddle.net/SMEAD/6/

我們需要用我們自己的標記所以我們只需要監聽一次更改的方向並設置標記。

google.maps.event.addListenerOnce(directionsDisplay, 'directions_changed', function() { 
    var directions = this.getDirections(); 
    var overview_path = directions.routes[0].overview_path; 
    var startingPoint = overview_path[0]; 
    var destination = overview_path[overview_path.length - 1]; 
    addMarker(startingPoint, 'start'); 
    addMarker(destination, 'end'); 
});

工作馬函數是addMarker。這設置了我們需要更新輸入框並重新計算方向的事件。

function addMarker(position, type) { 
    var marker = new google.maps.Marker({ 
     position: position, 
     draggable: true, 
     animation: google.maps.Animation.DROP, 
     map: map 
    }); 

    marker.type = type; // probably not a good idea to do this. 

    google.maps.event.addListener(marker, 'drag', function() { 
     var marker = this; 
     clearTimeout(dragTimer); 
     dragTimer = setTimeout(function() { 
      getLocationName(marker.getPosition(), function(name) { 
       if (marker.type === 'start') { 
        routeStart.value = name; 
       } else { 
        endStart.value = name; 
       } 
      }); 
     }, 250); 
    }); 

    google.maps.event.addListener(marker, 'dragend', function() { 
     calcRoute(startMarker.getPosition(), endMarker.getPosition()); 
    }); 

    if (type === 'start') { 
     startMarker = marker; 
    } else { 
     endMarker = marker; 
    } 
}

來源

2013-01-03 15:04:04

謝謝@seain惡魔，但我已經做了那部分現在我想要的是當我改變我的位置在地圖它的文本框的價值也隨着它改變，就像我之前說過的假設即將從紐約拉斯維加斯它會告訴我的方向與距離現在，當我拖動位置a chichago它也將複製在我的文本框。你能幫我解決這個問題嗎？ – amitesh

@amitesh你看演示了嗎？ http://jsfiddle.net/SMEAD/在演示中，在輸入字段中輸入Las Vegas和New York。然後將標記從拉斯維加斯移到芝加哥。輸入字段應更新爲芝加哥。 –

其在方向面板中的值不會變化，而不是在路徑啓動和路由器文本框中。在地圖上拖動標記時，我想要更改路線開始和路標文字。我希望你明白什麼即時通訊試圖說如果不是那麼讓我知道我會進一步解釋 – amitesh

計算距離和移動標記從谷歌地圖來源地

回答

相關問題