我现在非常接近这个，但不能完全得到我正在寻找的结果。这是尝试提取一系列地理位置 - 以及标题和文本。然后将这些分配给在谷歌地图上填充的标记。我的最终目标是获取每个标记和“地图中心”标记（如果愿意，可以使用集线器）之间的距离和行程持续时间，并在单击单个标记时将其填充到 infoWindow 中。
到目前为止，我已经了解了这个工作的各个方面，除了在 infoWindow 中正确填充距离/持续时间。我可以使用 innerHTML 成功填充“地图画布”之外的 div。
如果我尝试打印分配的 var 或更改 infoWindow 中 div 的内容，则该功能仅适用于第一次单击事件。之后 infoWindow 显示为空白。这是工作脚本：
<head>
<meta charset="utf-8" />
<title>Towns Hub</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<style>
.wrapper {position:relative;width:500px;height:300px;margin:30px auto;}
#map {width:500px;height:300px;}
.container{position:absolute;bottom:0;left:0;width:100%;z-index:999;}
.trav-det{border:1px solid #000;float:left;padding:7px;font-size:1.5em;background: rgba(255,255,255, .85);}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class='trav-det' id='distance_road'></div>
<div class='trav-det' id='duration'></div>
</div>
<div id="map"></div>
</div>
<script>
var map;
var arrMarkers = [];
var infowindow = new google.maps.InfoWindow();
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function mapInit(){
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
preserveViewport:true
});
var latlng = new google.maps.LatLng(45.18929617,-109.24727440);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions);
directionsDisplay.setMap(map);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(45.18929617,-109.24727440),
map: map,
title: 'Red Lodge, MT',
icon: 'http://mywebsite.com/images/orange-marker.png'
});
$.getJSON("hub.txt", {}, function(data){
$.each(data.places, function(i, item){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.lat, item.lng),
map: map,
title: item.title
});
arrMarkers[i] = marker;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("<p><strong>" + item.title + "</strong><br>"+ item.description +"</p>");
calcRoute(this.getPosition());
infowindow.open(map, this);
});
function calcRoute(drive_end) {
var start = new google.maps.LatLng(45.18929617,-109.24727440);
var end = drive_end;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distance = response.routes[0].legs[0].distance.text;
duration = response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;
document.getElementById("duration").innerHTML = duration;
}
});
}
});
});
}
google.maps.event.addDomListener(window, 'load', mapInit);
</script>
文本文件：
{"places": [{
"title": "Cooke City, MT",
"description": "TEXT",
"lat": 45.02009497,
"lng": -109.93234595
},
{
"title": "Silver Gate, MT",
"description": "TEXY",
"lat": 45.00687965,
"lng": -109.98979568
},
{
"title": "Absarokee, MT",
"description": "TEXT",
"lat": 45.52004697,
"lng": -109.44136186
},
{
"title": "Billings, MT",
"description": "TEXT",
"lat": 45.78333000,
"lng": -108.50000000
},
{
"title": "Bridger, MT",
"description": "TEXT",
"lat": 45.28568200,
"lng": -108.90821700
},
{
"title": "Cody, WY",
"description": "TEXT",
"lat": 44.52313500,
"lng": -109.07561100
},
{
"title": "Columbus, MT",
"description": "TEXT",
"lat": 45.62617100,
"lng": -109.25712600
},
{
"title": "Gardiner, MT",
"description": "TEXT",
"lat": 45.03049875,
"lng": -110.70471900
},
{
"title": "Nye, MT",
"description": "TEXT",
"lat": 45.43584263,
"lng": -109.80859757
},
{
"title": "Joliet, MT",
"description": "TEXT",
"lat": 45.48287830,
"lng": -108.97241592
}]}
关于在 infoWindow 中填充持续时间/距离的任何想法？
帮助表示赞赏！
谢谢，
山姆
ps 对于任何丑陋的脚本，我深表歉意。我边走边学，感谢任何关于使这个脚本更高效的想法！