[英]Markers not working in Google Maps API
我是Google Maps API的新手。 我編寫了一個程序,該程序將根據where.js中給出的緯度和經度在所有點上放置標記。 它會加載地圖,但不會放置任何標記。 我不明白我在做什么錯。
HTML代碼如下-
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Markets of Kolkata</title>
<link href="http://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<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 src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="where.js"></script>
<script>
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.39961,88.101350)
var mapOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
i = 0;
var markers = [];
for ( pos in myData ) {
i = i + 1;
var row = myData[pos];
window.console && console.log(row);
// 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]
});
markers.push(marker);
}
}
</script>
</head>
<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>
這是'where.js'的Javascript文件-
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','COLLEGE STREET MARKET(SPORTS GOOD)'],
[22.4977887,88.3796042, 'Garfa Main Rd, Kolkata, West Bengal 700075, India','COLLEGE STREET MARKET'],
[22.5048463,88.3882325, 'Purbachal Main Rd, Ramlal Bazar, Haltu, Kolkata, West Bengal 700078, India','COLLEGE STREET MARKET'],
[22.5867867,88.3564619, 'Kolkata, West Bengal 700073, India', 'BAITHAK KHANA PAPER MARKET'],
[22.5867867,88.3564619, 'Kolkata, West Bengal 700073, India', 'SAKUNTALA PARK VEGETABLE MARKET'],
[22.5867867,88.3564619, 'Kolkata, West Bengal 700073, India', 'SANTOSHPUR MUNICIPAL MARKET']];
JavaScript數組是零索引的。 您的代碼引用它們時就好像它們是一個索引一樣。
即您的代碼:
i = 0;
var markers = [];
for ( pos in myData ) {
i = i + 1;
var row = myData[pos];
...
}
您指的是myData[1]
(第二項), myData[2]
(第三項), myData[6]
,直到myData[6]
為止。 這將是您的標記數組中的第7個項目,但您只有6個項目。 因此,您可能會遇到JS錯誤(請檢查控制台),從而根本無法加載標記。
只要把i = i + 1;
循環結束時的一行。 或更改循環樣式,例如
for (var pos = 0; pos < myData.length; pos++) {
var row = myData[pos];
window.console && console.log(row);
var newLatlng = new google.maps.LatLng(row[0], row[1]);
var marker = new google.maps.Marker({
position: newLatlng,
map: map,
title: row[3]
});
markers.push(marker);
}
糾正這一行://在for循環中添加此行:
markers.setMap(map); markers.push(marker);
檢查console.log是否有任何錯誤:很高興為您提供幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.