谷歌地图的方向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与自定义标记

回答

相关问题