如何更改在DirectionsLeg中返回的地址文本
如何更改在DirectionsLeg中返回的地址文本
提问于 2017-04-21 05:46:24
我正在尝试更改从Google Javascript API返回的方向中显示的文本。我想要在路由的每个分支中返回的每个地址的前面加上一个企业名称。这些将帮助我们的用户更好地识别位置。
我正在使用以下代码进行测试(在我的特定示例中，路由中有8个分支：
response.routes[0].legs[0].start_address = 'Store #0: ' + response.routes[0].legs[0].start_address;
response.routes[0].legs[1].start_address = 'Store #1: ' + response.routes[0].legs[1].start_address;
response.routes[0].legs[2].start_address = 'Store #2: ' + response.routes[0].legs[2].start_address;
response.routes[0].legs[3].start_address = 'Store #3: ' + response.routes[0].legs[3].start_address;
response.routes[0].legs[4].start_address = 'Store #4: ' + response.routes[0].legs[4].start_address;
response.routes[0].legs[5].start_address = 'Store #5: ' + response.routes[0].legs[5].start_address;
response.routes[0].legs[6].start_address = 'Store #6: ' + response.routes[0].legs[6].start_address;
response.routes[0].legs[7].start_address = 'Store #7: ' + response.routes[0].legs[7].start_address;
directionsDisplay.setDirections(response);问题是我的更改仅显示在第一个分支，如下面链接的屏幕截图所示。在查询request对象时，它确实反映了我在进入setDirections方法之前所做的更改。但是，当我之后查询innerHTML时，原来的方向就在那里。
我在网上发现了许多这个属性被改变的例子，我发现奇怪的是只有第一个分支是有效的，而其余的分支却不起作用。我仍然是Google Maps API的新手，所以我绝对不排除开发人员的错误。敬请指教，谢谢！
查尔斯
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-04-21 06:56:49
看起来第一个标签之后的DirectionsDisplay面板上的标签使用的是end_address，而不是start_address。
将标签添加到这两个标签。
response.routes[0].legs[0].start_address = 'Store #0: ' + response.routes[0].legs[0].start_address;
response.routes[0].legs[1].start_address = 'Store #1: ' + response.routes[0].legs[1].start_address;
response.routes[0].legs[2].start_address = 'Store #2: ' + response.routes[0].legs[2].start_address;
response.routes[0].legs[3].start_address = 'Store #3: ' + response.routes[0].legs[3].start_address;
response.routes[0].legs[4].start_address = 'Store #4: ' + response.routes[0].legs[4].start_address;
response.routes[0].legs[5].start_address = 'Store #5: ' + response.routes[0].legs[5].start_address;
response.routes[0].legs[6].start_address = 'Store #6: ' + response.routes[0].legs[6].start_address;
response.routes[0].legs[7].start_address = 'Store #7: ' + response.routes[0].legs[7].start_address;
response.routes[0].legs[0].end_address = 'Store #1: ' + response.routes[0].legs[0].end_address;
response.routes[0].legs[1].end_address = 'Store #2: ' + response.routes[0].legs[1].end_address;
response.routes[0].legs[2].end_address = 'Store #3: ' + response.routes[0].legs[2].end_address;
response.routes[0].legs[3].end_address = 'Store #4: ' + response.routes[0].legs[3].end_address;
response.routes[0].legs[4].end_address = 'Store #5: ' + response.routes[0].legs[4].end_address;
response.routes[0].legs[5].end_address = 'Store #6: ' + response.routes[0].legs[5].end_address;
response.routes[0].legs[6].end_address = 'Store #7: ' + response.routes[0].legs[6].end_address;
response.routes[0].legs[7].end_address = 'Store #8' + response.routes[0].legs[7].end_address;
代码片段：
function initialize() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {
lat: 41.85,
lng: -87.65
}
});
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
waypts.push({
location: "New York, NY",
stopover: true
});
waypts.push({
location: "Boston, MA",
stopover: true
});
waypts.push({
location: "Chicago, IL",
stopover: true
});
waypts.push({
location: "Madison, WI",
stopover: true
});
waypts.push({
location: "Denver, CO",
stopover: true
});
waypts.push({
location: "Salt Lake City UT",
stopover: true
});
waypts.push({
location: "Mesa, AZ",
stopover: true
});
waypts.push({
location: "Las Vegas, NV",
stopover: true
});
directionsService.route({
origin: "Newark, NJ",
destination: "Los Angeles, CA",
waypoints: waypts,
optimizeWaypoints: true,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
response.routes[0].legs[0].start_address = 'Store #0: ' + response.routes[0].legs[0].start_address;
response.routes[0].legs[1].start_address = 'Store #1: ' + response.routes[0].legs[1].start_address;
response.routes[0].legs[2].start_address = 'Store #2: ' + response.routes[0].legs[2].start_address;
response.routes[0].legs[3].start_address = 'Store #3: ' + response.routes[0].legs[3].start_address;
response.routes[0].legs[4].start_address = 'Store #4: ' + response.routes[0].legs[4].start_address;
response.routes[0].legs[5].start_address = 'Store #5: ' + response.routes[0].legs[5].start_address;
response.routes[0].legs[6].start_address = 'Store #6: ' + response.routes[0].legs[6].start_address;
response.routes[0].legs[7].start_address = 'Store #7: ' + response.routes[0].legs[7].start_address;
response.routes[0].legs[0].end_address = 'Store #1: ' + response.routes[0].legs[0].end_address;
response.routes[0].legs[1].end_address = 'Store #2: ' + response.routes[0].legs[1].end_address;
response.routes[0].legs[2].end_address = 'Store #3: ' + response.routes[0].legs[2].end_address;
response.routes[0].legs[3].end_address = 'Store #4: ' + response.routes[0].legs[3].end_address;
response.routes[0].legs[4].end_address = 'Store #5: ' + response.routes[0].legs[4].end_address;
response.routes[0].legs[5].end_address = 'Store #6: ' + response.routes[0].legs[5].end_address;
response.routes[0].legs[6].end_address = 'Store #7: ' + response.routes[0].legs[6].end_address;
response.routes[0].legs[7].end_address = 'Store #8' + response.routes[0].legs[7].end_address;
// directionsDisplay.setDirections(response);
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions-panel');
directionsDisplay.setPanel(summaryPanel);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div id="directions-panel"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43530475
复制相关文章
相似问题