Question

我正在使用Google Maps Javascript API v3，

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

我尝试使用路线服务，我确实设法在指定原点和目的地点以及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 ，但由于它仍在基本地图上，我认为这是合理或可接受< / em>滥用API：）

JSFiddle demo

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

1 个答案: