特定圆半径

Question

我使用谷歌地图JavaScript API V3中突出显示所有路线（谷歌地图），

我想什么做的是选择在A点时突出显示特定圆的半径范围内的所有路由地图（点坐标和圆弧半径是输入参数）。

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

将原点设置为圆心时，是否可以设置多个目标点（圆周上的点），然后遍历可用路线并使用路线服务突出显示它们？

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

谢谢。

Answer 1

这是一个只是为了好玩回答。

不是一个真正的答案，因为它真的感觉像一个肮脏的小黑客，而且我不知道要明白你刻意突出什么（是所有的街道或结果的路线的要求 —这从你的问题是不清楚的）。

但基本上，我加了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