按照Google Map Api 3示例。
在正文的底部,它还包括jquery文件,下面是
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
HTML
<table>
<tr><td>
<div id="map_canvas" class="address" style=" width: 100%; height: 200px;">San Francisco</div>
</td></tr>
<tr><td>
<div id="map_canvas" class="address" style=" width: 100%; height: 200px;">San Diego</div>
</td></tr><tr><td>
<div id="map_canvas" class="address" style=" width: 100%; height: 200px;">San Jose</div>
</td></tr></table>
JQuery的
var map;
var geocoder = new google.maps.Geocoder();
function initialize() {
var mapOptions = {
zoom: 9,
panControl: false,
streetViewControl: false,
mapTypeControl: false
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
var address = $(".address");
var el;
address.each(function(){
el = $(this).text();
codeAddress(el);
});
function codeAddress(address) {
alert(address);
geocoder.geocode( { 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
我第一次尝试使用googleMap Api 3 - 我四处寻找答案。
每个表行中都会打印出动态多个地址。因此,从div.address中获取每个地址,并将每个地址转换为纬度和经度,然后显示地图。
但是现在它不会检查每个地址或循环所有地址,以便在使用定位标记显示地图之前将其转换为纬度和经度。
为什么不循环每个地址?有没有办法从div.address中获取和循环地址作为文本并将其转换为显示地图?
如您所见,jsfiddle上出现了1个不正确的地图:(
更新了#1
管理以显示包含所有标记的一个地图,但仍然无法为每个地址的每个标记获得3个单独的地图。无法理解为什么它只在第一行打印一个带有标记的地图。
感谢帮助和见解(如果有的话)
请帮助