Javascript 谷歌地图方向APIv3与自定义标记

我有一个谷歌地图，它使用谷歌地图的标准计算从a点到B点的路线。在这张地图上，我有一个从地图上获得的自定义标记。我想知道这些标记中的哪些与选定的管线相交

我已经创建了一个包含所有必要代码段的fiddle，但是该映射似乎没有在JSFIDLE中生成：（

下面是我的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);

var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
var-lati=-33.9149861；
长变率=18.6560594；
var标记；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=新的google.maps.LatLng（lati，longi）；
变量映射选项={
缩放：9，
中心：芝加哥
};
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
方向显示.setMap（地图）；
markers=$.getJSON（“http://secure.transcommercial.co.za/API/Toll，函数（数据）{
for（var i=0；i

任何建议都将不胜感激

当您将

标记设置为返回
$.getJSON
时，这不会产生任何结果，您必须自己存储标记：

 //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"
    }));
  }
 });

演示：

与JSFIDLE相关：您必须选择选项“no wrap，in head”。当前您使用选项“onload”，因此整个代码将在
window.onload
激发时执行。但当您此时执行代码时，将永远不会调用initialize，因为它也将在onload事件中调用，该事件在添加侦听器时已激发，不会再次激发。
有什么问题吗？@geocodezip我在我的ASP MVC应用程序。ko.toJS所做的只是将对象从我的API转换为可用格式，在本例中为float。
    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);
            });
        }
    });