javascript - 突出显示特定圆半径内的所有路线(谷歌地图)

Question

我正在使用 Google Maps Javascript API v3，

我想做的是在 map 中选择一个点时突出显示特定圆半径内的所有路线(点坐标和圆半径是输入参数)。

我尝试使用路线服务，并且在指定起点和终点以及 travelMode 并且 provideRouteAlternatives 选项设置为 true 时，我确实设法显示了所有可能的路线。

当设置起点为圆心时，有没有办法设置多个目的地点(圆周上的点)，然后循环可用路线并使用路线服务突出显示它们？

P.S.:我不是要围绕一个点画一个圆，而是要突出显示圆半径内的所有道路。

谢谢。

Answer 1

这是一个纯属娱乐的回答。

这不是一个真正的答案，因为它真的感觉像是一个肮脏的小黑客，而且我不确定你到底想强调什么(是所有街道还是结果路线请求——这在你的问题中并不清楚)。

但基本上，我添加了 2 张 map 。第一个是基础 map ，另一个位于第一个 map 之上，具有边界半径，并应用了样式。

然后我同步两个 map ，以便它们都相对移动(在平移/缩放时)。

var myLatlng = new google.maps.LatLng(51.51, -0.12);

var styles = [{
    "featureType": "road",
        "elementType": "geometry.fill",
        "stylers": [{
        "color": "#ff3380"
    }]
}];

var mapOptions = {
    zoom: 12,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var roundedMapOptions = {
    zoom: 12,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    scrollwheel: false,
    styles: styles
};

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var roundedMap = new google.maps.Map(document.getElementById("map-rounded"), roundedMapOptions);

google.maps.event.addListener(map, 'drag', function () {

    roundedMap.setCenter(map.getCenter());
});

google.maps.event.addListener(roundedMap, 'drag', function () {

    map.setCenter(roundedMap.getCenter());
});

google.maps.event.addListener(map, 'idle', function () {

    roundedMap.setCenter(map.getCenter());
});

google.maps.event.addListener(map, 'zoom_changed', function () {

    roundedMap.setZoom(map.getZoom());
});

idle 事件监听器的使用注意事项:

如果您非常快速地拖动 map ，有时会失去同步。因此，使用 idle 事件监听器， map 会在拖动后重新同步。

请注意，我添加了以下 CSS 规则以在圆形 map 上隐藏版权:

#map-rounded .gm-style-cc {
    display: none;
}

这显然反对Google Maps TOS 但由于它仍然存在于 basemap 上，我认为这是对 API 的公平或可接受滥用:)

JSFiddle demo