0
我使用Google Maps API構建了一個地圖，該地圖將根據「whereNew.js」的經緯度繪製標記，標記的顏色將依賴於「 MarketData.js'。當點擊標記時，它會顯示一個帶有按鈕「顯示路線」的infowindow和一些基於「MarketData.js」的信息。到此爲止，代碼已成功執行。未捕獲的類型錯誤：無法讀取屬性'路線'
此後，當點擊任何標記的「顯示路線」按鈕時，我希望Google Maps API顯示「MarketData.js」第8列每個位置的所有路線到該標記，但是當我點擊這個按鈕，它給這個錯誤：
Uncaught TypeError: Cannot read property 'route' of undefined at calculateAndDisplayRoute
whereNewTest1.html:162
我不明白我在做什麼錯誤請幫助
whereNewTest1.html
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Markets of Kolkata</title>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
#warnings-panel {
width: 100%;
height: 10%;
text-align: center;
}
</style>
<link href="http://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<!-- If you are in China, you may need to use theis site for the Google Maps code
<script src="http://maps.google.cn/maps/api/js" type="text/javascript"></script> -->
<!--<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> -->
<!-- <script async defer src=
"https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyDrdSH53E0MRIfajUGZQiFHAB0aLfzFIVU&v=3&v=3&callback=displayDirections"></script>
</script> -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbXta5ppMyzPmTCGNsyP-djMlSOGJ9t9o&callback=initialize">
</script>
<script src="whereNew.js"></script>
<script src="marketData.js"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var markerArray = [];
var dest ;
function initialize()
{
//alert("To see the title of a marker, hover over the marker but don't click.");
var myLatlng = new google.maps.LatLng(22.39361,88.099263)
var mapOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var markerArray = [];
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer(
{
map: map
});
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
i = 0;
var markers = [];
for (pos in myData)
{
var row = myData[pos];
var row1 = MarketInfo[i];
window.console && console.log(row) && console.log(row1);
// if (i < 3) { alert(row); }
var newLatlng = new google.maps.LatLng(row[0], row[1]);
var marker = new google.maps.Marker(
{
position: newLatlng,
map: map,
title: row[3],
});
var infowindow = new google.maps.InfoWindow({ });
var largeInfowindow = new google.maps.InfoWindow({ });
dest = row1[1];
var content = row1[2] + '<br/><button onclick = "calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map, dest);">Show Routes</button>';
if((content.search("WHOLESALE"))>-1)
{
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
}
else if((content.search("WHOLE SALE"))>-1)
{
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
}
else if((content.search("MAJOR"))>-1)
{
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
}
else
{
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow)
{
return function()
{
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
markers.push(marker);
i = i + 1;
}
function populateInfoWindow(marker, infowindow)
{
if(infowindow.marker != marker)
{
infowindow.marker = marker;
infowindow.setContent('<div>'+infowindow.content+'</div>');
infowindow.open(map, marker);
infowindow.addListener('closeclick', function(){
infowindow.setMarker(null);
});
}
}
}
function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map, dest)
{
for (var i = 0; i < markerArray.length; i++)
{
markerArray[i].setMap(null);
}
for (pos in MarketInfo)
{
var row = MarketInfo[pos];
// Second loop for multiple destination
var str_array = row[7].split(',');
for (var j = 0; j < str_array.length; j++)
{
directionsService.route(
{
origin: str_array[j],
destination: dest,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK')
{
document.getElementById('warnings-panel').innerHTML = '<b>' + response.routes[0].warnings + '</b>';
var dirDisplay = new google.maps.DirectionsRenderer({
map: map
});
dirDisplay.setDirections(response);
}else
{
window.alert('Directions request failed due to ' + status);
}
});
}
}
}
</script>
<body onload="initialize()">
<div id="map_canvas" style="height: 600px"></div>
<p>
<b>Developed by</b>
<a href="http://www.linkedin.com/in/arnab-chakravarty-8a329111b?trk=nav_responsive_tab_profile"><b>Arnab Chakravarty</b></a>.
</p>
</body>
</html>
whereNew.js
myData = [
[22.5193768,88.3656851, 'K.M.C. Market, 3rd Floor Market Complex, 212, Rash Behari Avenue Road, Hindustan Park, Gariahat, Kolkata, West Bengal 700019, India', 'PAL BAZAR'],
[22.4977887,88.3796042, 'Garfa Main Rd, Kolkata, West Bengal 700075, India', 'RAMLAL BAZAR'],
[22.5048463,88.3882325, 'Purbachal Main Rd, Ramlal Bazar, Haltu, Kolkata, West Bengal 700078, India', 'COLLEGE STREET MARKET (SPORTS GOODS)']
];
MarketData.js
MarketInfo = [
["GARIAHAT KMC MARKET", "K.M.C. Market, 3rd Floor Market Complex, 212, Rash Behari Avenue Road, Hindustan Park, Gariahat, Kolkata- 700019", "MAJOR (1400SHOP + HOWKER)", "FRUITS, VEGETABLES, FLOWER, FISH, MEAT, GROCERY, CLOTHING, FURNITURE , HOUSEHOLD, FOOTWEAR ELECTRICAL ETC", "", "", "BARABAZAR, KOLEYMART", "HOWRAH", "We collect the goods ourselves", "", "MANY", "Cars, Light goods vehicles (LGV), Heavy goods vehicles/lorries (HGV)", "Within one hour", "", "", "No problems encountered", "", "IF A UNLOADING SPACE CAN PROVIDE BY GOVT. IT WILL BE BETTER"],
["PAL BAZAR", "GARIFA MAIN ROAD, KOLKATA - 700 075", "MINOR (150SHOP + 70HOWKERS)", "FRESH, COOL AND FROZEN PRODUCT, OTHER TYPE OF CONSUMER GOODS, TEXTILE,FOOTWEAR, ELECTRONIC AND ELECTRICAL EQUIPMENT, BUILDING MATERIALS", "", "SANDHYA BAZAR", "BARA BAZAR, CHADNI CHOWK", "", "The goods are delivered by multiple suppliers", "MANY", "10 TO 20", "Bicycles/tricycles/carts, Motorised two/three-wheelers", "Within one hour", "", "", "Delivery vehicle causes traffic jams in front of the establishment", "", ""],
["RAMLAL BAZAR", "Purbachal Main Rd, Ramlal Bazar, Haltu. Kolkata-700078", "MINOR (150 SHOP+ 180 HOWKERS)", "FRUITS, VEGETABLE, FISH, MEAT, GROCERY, TEXTILE, ELECTRICAL, BUILDING MATERIALS ETC", "", "BAGHAJATIN AND SANDHYA BAZAR", "BARA BAZAR, EZRA ST.", "", "We collect the goods ourselves", "", "MANY", "Bicycles/tricycles/carts, Motorised two/three-wheelers, Light goods vehicles (LGV)", "Within one hour", "", "", "Limited storage space available, Delivery vehicle causes traffic jams in front of the establishment, High delivery costs", "", "PARKING PLACE REQUIRE"]
];
你有一個'}'地方在你的代碼不應該在那裏。 –
@JohnM我檢查了兩次。我不認爲這是問題。 – ArnabC