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

Question

我使用的是Google Maps Javascript API v3，

附注：我不是试图在一个点周围画一个圆，而是强调圆半径内的所有道路。

谢了。

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());
});

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

这显然是反对Google Maps的，但由于它仍然在基础地图上，我认为这是对API的公平或可接受的滥用：）

JSFiddle演示