突出显示特定圆半径内的所有路线（google 地图）

Question

我正在使用 Google 地图 Javascript API v3，

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

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

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

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

谢谢。

Answer 1

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

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

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

然后我同步两个地图，以便它们都相对移动（平移/缩放时）。

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事件监听器的注意事项:

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

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

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

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

JSFiddle demo

突出显示特定圆半径内的所有路线（google 地图）

highlight all routes (google maps) within a specific circle radius

javascript

google-maps

google-maps-api-3

maps