Показать значение рядом с строкой на картах Google

Question

Я создал файл KML с линиями, соответствующими дорогам (см. Рисунок для 1 дороги/ссылки). Я изменил ширину линии и цвет, чтобы различать типы дорог. У меня есть 2 вопроса о макете:

1) Я хотел бы добавить и повернуть значение вдоль линии. Возможно ли это использовать KML-файл или использовать другой метод (например, 4.32 на картинке)?

2) Можно ли показать торцевую крышку линии как «квадрат»? (значение по умолчанию в моем KML округлено)

Спасибо вам большое!

Примера (вопрос 1):

Answer 1

Для # 1 можно добавить Infobox с повернутым текстом вдоль ломаной линии.
Для # 2 нет возможности изменить, как обрабатываются концы полилиний, вы можете попробовать поставить квадратный символ в конце, но это будет взломать.

var labelText = "4.32"; 
var labelDiv = document.createElement("div"); 
labelDiv.innerHTML = labelText; 
labelDiv.setAttribute("id","label"); 
labelDiv.setAttribute("style","-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);  transform: rotate(45deg);"); 

var myOptions = { 
    content: labelDiv, 
    boxStyle: { 
     border: "none", 
     textAlign: "center", 
     fontSize: "12pt", 
     width: "50px" 
    }, 
    disableAutoPan: true, 
    pixelOffset: new google.maps.Size(-25, 0), 
    position: new google.maps.LatLng(52.193176,8.642923), 
    closeBoxURL: "", 
    isHidden: false, 
    pane: "mapPane", 
    enableEventPropagation: true 
}; 

var ibLabel = new InfoBox(myOptions); 
ibLabel.open(map); 

var directionsDisplay; 
 
var directionsService = new google.maps.DirectionsService(); 
 
var map; 
 

 
function initialize() { 
 
    directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    polylineOptions: { 
 
     strokeWeight: 10, 
 
     strokeColor: "#FF0000" 
 
    }, 
 
    suppressMarkers: true 
 
    }); 
 
    var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
 
    var mapOptions = { 
 
    zoom: 7, 
 
    center: chicago 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
 
    directionsDisplay.setMap(map); 
 
    calcRoute(new google.maps.LatLng(52.19386, 8.640927), new google.maps.LatLng(52.19171, 8.64429)); 
 
    var labelText = "4.32"; 
 
    var labelDiv = document.createElement("div"); 
 
    labelDiv.innerHTML = labelText; 
 
    labelDiv.setAttribute("id", "label"); 
 
    labelDiv.setAttribute("style", "-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);  transform: rotate(45deg);"); 
 

 
    var myOptions = { 
 
    content: labelDiv, 
 
    boxStyle: { 
 
     border: "none", 
 
     textAlign: "center", 
 
     fontSize: "12pt", 
 
     width: "50px" 
 
    }, 
 
    disableAutoPan: true, 
 
    pixelOffset: new google.maps.Size(-25, 0), 
 
    position: new google.maps.LatLng(52.193176, 8.642923), 
 
    closeBoxURL: "", 
 
    isHidden: false, 
 
    pane: "mapPane", 
 
    enableEventPropagation: true 
 
    }; 
 

 
    var ibLabel = new InfoBox(myOptions); 
 
    ibLabel.open(map); 
 
} 
 

 
function calcRoute(start, end) { 
 
    var request = { 
 
    origin: start, 
 
    destination: end, 
 
    travelMode: google.maps.TravelMode.DRIVING 
 
    }; 
 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
    } 
 
    }); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>