特定圓半徑

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