Question

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

我已经创建了一个包含所有必要代码段的小提琴，但地图似乎没有在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);

非常感谢任何建议！

Answer 1

当您将markers设置为$.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"
    }));
  }
 });

要检查标记是否放置在路线上，请使用方法google.maps.geometry.poly.isLocationOnEdge。

它希望作为参数LatLng（标记位置）和Polyline（根据返回路径的overview _路径动态创建线，该行不得可见）

示例（隐藏除了放置在给定路线上的标记之外的所有标记）：

    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触发时将执行整个代码。但是当你在这个时候执行代码时，initize将永远不会被调用，因为它也会在onload-event中被调用，当你添加监听器时它已被触发，并且不会再次触发。

带有自定义标记的Google Maps Directions APIv3

1 个答案: