在 google 地图中的行旁边显示值

Question

我创建了一个 KML 文件，其中包含与道路相对应的线（参见 1 road/link 的图片）。我改变了线宽和颜色来区分道路的类型。我有 2 个关于布局的问题：

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

2) 是否可以将一行的结尾显示为 'square' ？（我的 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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/archive/infobox/src/infobox.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

在 google 地图中的行旁边显示值

Show Value next to line in google maps

google-maps

google-maps-api-3

kml