谷歌地圖的方向APIv3與自定義標記

-2

我有一個谷歌地圖，它使用谷歌地圖使用標準Directions API計算從點A到點B的路線。在這個地圖上我有我從database獲得的自定義標記。我想知道哪些標記與所選路線相交。谷歌地圖的方向APIv3與自定義標記

我創建了一個撥弄了所有必要的代碼段，但地圖似乎並不在的jsfiddle :(

http://jsfiddle.net/Fumunchu/94kLnrr7/2/ 這裏產生是我的JavaScript來生成地圖，並添加標記

var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 
var lati = -33.9149861; 
var longi = 18.6560594; 
var markers; 

function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chicago = new google.maps.LatLng(lati, longi); 
    var mapOptions = { 
     zoom: 9, 
     center: chicago 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    directionsDisplay.setMap(map); 
    markers = $.getJSON("http://secure.transcommercial.co.za/API/Toll", function (data) { 
     for (var i = 0; i < ko.toJS(data).length; i++) { 
      new google.maps.Marker({ 
       animation: google.maps.Animation.DROP, 
       position: new google.maps.LatLng(ko.toJS(data)[i].TollLatitude, ko.toJS(data)[i].TollLongitude), 
       map: map, 
       icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png" 
      }); 
     } 
    }); 

    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      map.setCenter(initialLocation); 
     }); 
    } 
} 

function calcRoute() { 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value; 
    var request = { 
     origin: start, 
     destination: end, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 
    directionsService.route(request, function (response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
    }); 
} 

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

任何意見，將不勝感激！

來源

2015-04-03 Jacques Bronkhorst

問題是什麼？ – geocodezip 2015-04-03 13:23:06

什麼是'ko.toJS'？ – geocodezip 2015-04-03 13:28:00

@geocodezip我在我的ASP MVC應用程序中使用http://knockoutjs.com/documentation/json-data.html。所有ko.toJS都會將對象從我的API轉換爲可用格式，在這種情況下爲float。 – 2015-04-03 13:35:25

當您設置markers到的012回這不會有什麼結果，你必須存儲在您自己的標記：

//let markers be an array 
var markers=[]; 

//.......... 

//requesting the data 
$.getJSON("http://secure.transcommercial.co.za/API/Toll", function (data) { 
    data=ko.toJS(data); 
    for (var i = 0; i < data.length; i++) { 
    //push the new marker onto the markers-array 
    markers.push(new google.maps.Marker({ 
     animation: google.maps.Animation.DROP, 
     position: new google.maps.LatLng(data[i].TollLatitude, data[i].TollLongitude), 
     map: map, 
     icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png" 
    })); 
    } 
});

要檢查標誌被放置在路線上使用的方法google.maps.geometry.poly.isLocationOnEdge。

它期待作爲參數LatLng（標記位置）和Polyline（創建基於所述overview _path返回路徑的運行中的線，所述線必須不可見）

實施例（隱藏了所有

directionsService.route(request, function (response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      //create Polyline based on route 
      var line=new google.maps.Polyline({path:response.routes[0].overview_path}); 
      markers.forEach(function(marker){ 
      marker.setMap((google.maps.geometry.poly.isLocationOnEdge(marker.getPosition(),line,.01))?map:null); 
      }); 
     } 
    });

演示：http://jsfiddle.net/doktormolle/srycht1z/

相關的jsfiddle：你必須選擇的選項「沒有包裝，在他不同的是放置在特定航線上的標記）標記廣告」。目前您使用「onload」選項，因此當window.onload觸發時將會執行整個代碼。但是，此時執行代碼時，永遠不會調用initialize，因爲它也會在onload事件中調用，在添加偵聽器時它已經被觸發並且不會再次觸發。

來源

2015-04-03 23:36:51

谷歌地圖的方向APIv3與自定義標記

回答

相關問題