Возможно ли с помощью API Карт Google выделять улицы?
Единственное, что я мог найти, было близко к этому эффекту - рисовать над ними линии.
Но это много работы и более неточно. Линии также перейдут по именам мест.
Я хочу, чтобы выделить определенные уличные имена, как если бы вы переходили от точки a к b.
Так, например, если 10 улиц закрыты стрелками, я могу выделить эти улицы.
API Карт Google, можно ли выделить конкретные улицы?
Ответ 1
Это можно сделать довольно легко, используя средство отображения API Карт API.
Вы должны предоставить полные/длинные координаты начальной и конечной точки вашей улицы, а рендер сделает все вычисления и покраску для вас. Вам НЕ нужно читать в направлениях и рисовать полилинию самостоятельно!
Посмотрите в действии здесь:
http://jsfiddle.net/HG7SV/15/
Это код, все волшебство выполняется в функции initialize():
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
// init map
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// init directions service
var dirService = new google.maps.DirectionsService();
var dirRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true});
dirRenderer.setMap(map);
// highlight a street
var request = {
origin: "48.1252,11.5407",
destination: "48.13376,11.5535",
travelMode: google.maps.TravelMode.DRIVING
};
dirService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
dirRenderer.setDirections(result);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Если ваша улица изогнута, и рендереру нужно найти ярлык, который вы не намеревались, это можно легко изменить, добавив промежуточные путевые точки, чтобы нарисовать линию точно на нужную улицу:
var request = {
origin: "48.1252,11.5407",
destination: "48.13376,11.5535",
waypoints: [{location:"48.12449,11.5536"}, {location:"48.12515,11.5569"}],
travelMode: google.maps.TravelMode.DRIVING
};