我是 JS 的小新手，我正在尝试循环遍历节点中的一些坐标并将其放置在 Google map 上。
这是我的代码
var lis = document.getElementById("showNames").getElementsByTagName("li");
var lat = document.getElementById("showLat").getElementsByTagName("li");
var lng = document.getElementById("showLng").getElementsByTagName("li");
var length = lis.length;
for (var i = 0; i < length; i++) {
new google.maps.Marker({
position: new google.maps.LatLng(lat[i].innerHTML, lng[i].innerHTML),
icon: '/panasonic/images/store-icons.png'
}).setMap(map);
}
这不起作用，我得到一个空 map ，但 firebug 没有显示错误。
如果我在循环之外执行此操作
new google.maps.Marker({
position: new google.maps.LatLng(lat[0].innerHTML, lng[0].innerHTML),
icon: '/panasonic/images/store-icons.png'
//animation:google.maps.Animation.BOUNCE
}).setMap(map);
但是我需要它循环，因为我将从数据库更新
谢谢
最佳答案
您可以检查以下示例。当您单击“添加一些标记”链接时，我有一个坐标数组，这些坐标会显示在 map 上。
<!doctype html>
<html lang="en">
<head>
<title>Google Maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
],
demoCenter = new google.maps.LatLng(41,-87),
map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function addMarkers()
{
var marker,
i,
infowindow = new google.maps.InfoWindow();
for (i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(cityList[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
$(document).ready(function() {
initialize();
});
$(document).on('click', '.add-markers', function(e) {
e.preventDefault();
addMarkers();
});
</script>
</head>
<body>
<div id="basic-map">
<div id="map_canvas" style="height:350px;"></div>
<a href="#" class="add-markers">Add Some Markers</a>
</div>
</body>
</html>
更新答案以自动显示标记:
<!doctype html>
<html lang="en">
<head>
<title>Google Maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
],
demoCenter = new google.maps.LatLng(41,-87),
map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function addMarkers()
{
var marker,
i,
infowindow = new google.maps.InfoWindow();
for (i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(cityList[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
$(document).ready(function() {
initialize();
addMarkers();
});
</script>
</head>
<body>
<div id="basic-map">
<div id="map_canvas" style="height:350px;"></div>
</div>
</body>
</html>
关于javascript - 在 Google map 上放置多个标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15173425/