更改Google Maps路线中端点标记的标题 [英] Changing titles of endpoint markers in a Google Maps route
问题描述
我有一个简单的测试网页，其中显示了行车路线:
I have a simple test webpage, which displays driving directions:
效果很好，但是我的问题是所示路线的开始和结束标记的标题没有意义，分别为"A"和"B".
It works well, but my problem is that the start and end markers of the shown route have the meaningless titles "A" and "B".
我想使用 ReverseGeocoding 来获取以下内容的标题2个路由端点.
I would like to use ReverseGeocoding to fetch the titles of the 2 route endpoints.
因此，我准备了以下代码，并且地址已正确提取，并使用console.log打印了出来:
So I have prepared the following code and the addresses are fetched correctly and are printed out using console.log:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({});
map = new google.maps.Map(document.getElementById('map-canvas'), null);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = new google.maps.LatLng(51.470907, 7.225558);
var end = new google.maps.LatLng(52.435293, 10.736883);
var startGeocoder = new google.maps.Geocoder();
var endGeocoder = new google.maps.Geocoder();
startGeocoder.geocode({'latLng': start}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results[1]) {
console.log('START: ' + results[1].formatted_address);
//infowindow.setContent(results[1].formatted_address);
//infowindow.open(map, marker);
}
});
endGeocoder.geocode({'latLng': end}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results[1]) {
console.log('END: ' + results[1].formatted_address);
//infowindow.setContent(results[1].formatted_address);
//infowindow.open(map, marker);
}
});
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);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
但是我的问题是我不知道如何访问路线的2个端点标记，并将其标题从"A"和"B"更改为我获取的地址字符串
However my problem is that I don't know how to access the 2 endpoint markers of the route and change their titles from "A" and "B" to the address strings that I have fetched.
DirectionsRenderer 的Google Maps JavaScript API v3参考没有" t为此列出任何明显的钩子(或者我应该在这里使用infoWindow属性?但是为什么它没有数组，因为我有2个端点?)...
The Google Maps JavaScript API v3 reference for DirectionsRenderer doesn't list any obvious hooks for that (or should I somehow use the infoWindow property here? But why isn't it an array since I have 2 endpoints?)...
更新:
以下是在伊曼纽尔的建议后更新的代码(谢谢！)
Here is updated code after Emmanuel's suggestion (thanks!)
它可以工作，但是我不满意，因为仅当用户将鼠标悬停在标记上时才会显示端点标题，并且我的目标环境中没有鼠标.我想知道是否有更好的选择来使端点地址在地图上永久可见?
It works, but I am not happy with it because the endpoint titles are only displayed, when the user hovers the mouse over the markers - and I don't have a mouse in my target environment. I wonder if there is some better option to make the endpoint addresses permanently visible at the map?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var directionsDisplay;
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
map = new google.maps.Map(document.getElementById('map-canvas'), null);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = new google.maps.LatLng(51.470907, 7.225558);
var end = new google.maps.LatLng(52.435293, 10.736883);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status != google.maps.DirectionsStatus.OK)
return;
directionsDisplay.setDirections(response);
// add start and end markers
var start = response.mc.origin;
var startMarker = new google.maps.Marker({
position: start,
map: map
});
var startGeocoder = new google.maps.Geocoder();
startGeocoder.geocode({'latLng': start}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results[1]) {
startMarker.setOptions({title: 'START: ' + results[1].formatted_address});
}
});
var end = response.mc.destination;
var endMarker = new google.maps.Marker({
position: end,
map: map
});
var endGeocoder = new google.maps.Geocoder();
endGeocoder.geocode({'latLng': end}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results[1]) {
endMarker.setOptions({title: 'END: ' + results[1].formatted_address});
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
推荐答案
我不知道如何访问这些标记.但是我有另一种选择.您可以隐藏这些标记并设置自己的标记.然后，您可以让他们随心所欲.
I don't know how to access those markers. But I have an alternative; you can suppress those markers and set your own. Then you can make them how ever you want.
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var startMarker;
var endMarker;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
map = new google.maps.Map(document.getElementById('map-canvas'), null);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = new google.maps.LatLng(51.470907, 7.225558);
var end = new google.maps.LatLng(52.435293, 10.736883);
var startGeocoder = new google.maps.Geocoder();
var endGeocoder = new google.maps.Geocoder();
startGeocoder.geocode({'latLng': start}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results[1]) {
startMarker.setOptions({title: 'START: ' + results[1].formatted_address});
}
});
endGeocoder.geocode({'latLng': end}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results[1]) {
endMarker.setOptions({title: 'END: ' + results[1].formatted_address});
}
});
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);
// add start and end markers
startMarker = new google.maps.Marker({
position: response.mc.origin,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
map: map
});
endMarker = new google.maps.Marker({
position: response.mc.destination,
map: map
});
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
这篇关于更改Google Maps路线中端点标记的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
