在 google 地图中的行旁边显示值
Show Value next to line in google maps
我创建了一个 KML 文件,其中包含与道路相对应的线(参见 1 road/link 的图片)。我改变了线宽和颜色来区分道路的类型。我有 2 个关于布局的问题:
1) 我想沿线添加和旋转一个值。是否可以使用 KML 文件或我是否使用其他方法(如图片中的 4.32)?
2) 是否可以将一行的结尾显示为 'square' ? (我的 KML 中的默认值是四舍五入的)
非常感谢!
示例(问题 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>
我创建了一个 KML 文件,其中包含与道路相对应的线(参见 1 road/link 的图片)。我改变了线宽和颜色来区分道路的类型。我有 2 个关于布局的问题:
1) 我想沿线添加和旋转一个值。是否可以使用 KML 文件或我是否使用其他方法(如图片中的 4.32)?
2) 是否可以将一行的结尾显示为 'square' ? (我的 KML 中的默认值是四舍五入的)
非常感谢!
示例(问题 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>