在Google地图中显示旁边的值

Question

我创建了一个带有与道路相对应的线条的KML文件（请参阅1道/链接的图片）。我改变了线宽和颜色来区分各种道路。我有两个关于布局的问题：

1）我想添加并沿着线旋转一个值。这是可能使用KML文件或我使用其他方法（如图片中的4.32）？

2）是否可以显示一个行的结束帽为'方形'？ （默认在我的KML中舍入）

非常感谢！

实施例（问题1）：

Answer 1

对于＃1可以沿折线旋转的文本添加资讯盒。
对于＃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>