2013-03-27 60 views
1

我試着做http://www.geocodezip.com/v3_SO_multipleGeocodedMarkersFromXml.html谷歌地圖API V3:地理編碼多個地址和創建地圖標記

我已經包括了我的服務器上的downloadxml.js但它仍然不工作本教程。地圖加載但沒有地圖標記。任何人都可以幫助,因爲我不明白爲什麼它不會工作。

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
type="text/javascript"></script> 
<script type="text/javascript" src="scripts/downloadxml.js"></script> 
<script type="text/javascript"> 
var map = null; 
var geocoder = new google.maps.Geocoder(); 
var info_window = new google.maps.InfoWindow(); 
var bounds = new google.maps.LatLngBounds(); 
function geocodeAddress(xmldata) 
{ 
    var address = xmldata.getElementsByTagName('address')[0].firstChild.data; 
    var city = xmldata.getElementsByTagName('city')[0].firstChild.data; 
    var address_google_map = address + ', ' + city + ', ON'; 
    var info_text = address + '<br />' + city + ' ON'; 

    geocoder.geocode 
    ({'address': address_google_map}, 
    function (results, status) 
    { 
     if (status == google.maps.GeocoderStatus.OK) { 
     createMarker(results[0].geometry.location, info_text); 
     } else { 
     alert("geocode of "+ address +" failed:"+status); 
     } 
    }); 
} 
function createMarker(latlng, html) 
{ 
var marker = new google.maps.Marker 
     ({ 
      map: map, 
      position: latlng 
     }); 
google.maps.event.addListener(marker, 'click', function() { 
      info_window.setContent(html); 
      info_window.open(map, marker); 
     }); 
bounds.extend(latlng); // Here we tell what are next viewport bounds 
} 
function initialize() 
{ 
var myLatLng = new google.maps.LatLng(45.2340684, -75.6287287); 
var myOptions = 
{ 
    zoom: 10, 
    mapTypeControl: true, 
    center: myLatLng, 
    zoomControl: true, 
    zoomControlOptions: 
    { 
     style: google.maps.ZoomControlStyle.SMALL 
    }, 
    StreetViewControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
map = new google.maps.Map(document.getElementById('map'), myOptions); 
google.maps.event.addListener 
(map, 'click', 
function() 
{ 
    info_window.close(); 
}); 

downloadUrl('listings.xml', 
function (listings_data) 
{ 
    listings_data = xmlParse(listings_data); 
    var markers = listings_data.documentElement.getElementsByTagName('listing'); 
    var geocoder = new google.maps.Geocoder(); 
    for (var i = 0; i < markers.length; i++) 
    { 
     geocodeAddress(markers[i]); 
    } 
google.maps.event.addListenerOnce(map, 'idle', function() {map.fitBounds(bounds);}); 
}); 
} 
</script> 
</head> 
<body onload="initialize();"> 
<div id="map" style="width: 500px; height: 400px;"></div> 

</body> 
</html> 

和我的XML

<?xml version="1.0" encoding="UTF-8"?> 
<listings> 
<listing> 
<address>4123 Rideau Valley Rd</address> 
<city>MANOTICK</city> 
</listing> 
<listing> 
<address>4456 Rideau Valley Rd</address> 
<city>MANOTICK</city> 
</listing> 
<listing> 
<address>111 Bridge St</address> 
<city>MANOTICK</city> 
</listing> 
<listing> 
<address>777 Bridge St</address> 
<city>Ottawa</city> 
</listing> 
<listing> 
<address>1333 Bridge Street</address> 
<city>Manotick</city> 
</listing> 
</listings> 
+0

您是否嘗試過單步執行代碼????要查看是否發生了錯誤,或者您的數據是否有數據? – 2013-03-27 16:45:55

+0

是的。一切都與示例相同,並應該工作。示例地圖從默認的緯度位置開始,然後快速加載地圖標記。由於某些原因,我的複製版本不加載標記。 – user2208358 2013-03-27 16:50:51

+0

看起來像這個例子開始的代碼不能跨瀏覽器工作(原來的例子在Firefox中對我不起作用),不知道你是否看到了這個。我會修好它。 – geocodezip 2013-03-27 19:14:37

回答

1

我看到一些問題。你缺少function聲明您geocodeAddress(xmldata)功能..所以改線14:

function geocodeAddress(xmldata) 
{ 
... other code continues here ... 

那麼它應該工作時,我還注意到,當您添加標記時,您不會擴展您的var bounds = new google.maps.LatLngBounds();對象,因此請記住添加createMarker函數t ο包含它,像這樣:

function createMarker(latlng, html) 
{ 
    var marker = new google.maps.Marker 
      ({ 
       map: map, 
       position: latlng 
      }); 
google.maps.event.addListener(marker, 'click', function() { 
       info_window.setContent(html); 
       info_window.open(map, marker); 
      }); 
    bounds.extend(latlng); // Here we tell what are next viewport bounds 
} 

經過測試,一切工作後:)乾杯!

編輯:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
type="text/javascript"></script> 
<script type="text/javascript" src="scripts/downloadxml.js"></script> 
<script type="text/javascript"> 
var map = null; 
var geocoder = new google.maps.Geocoder(); 
var info_window = new google.maps.InfoWindow(); 
var bounds = new google.maps.LatLngBounds(); 
function geocodeAddress(xmldata) 
{ 
    var address = xmldata.getElementsByTagName('address')[0].firstChild.data; 
    var city = xmldata.getElementsByTagName('city')[0].firstChild.data; 
    var address_google_map = address + ', ' + city + ', ON'; 
    var info_text = address + '<br />' + city + ' ON'; 

    geocoder.geocode 
    ({'address': address_google_map}, 
    function (results, status) 
    { 
     if (status == google.maps.GeocoderStatus.OK) { 
     createMarker(results[0].geometry.location, info_text); 
     } else { 
     alert("geocode of "+ address +" failed:"+status); 
     } 
    }); 
    } 
function createMarker(latlng, html) 
{ 
    var marker = new google.maps.Marker 
      ({ 
       map: map, 
       position: latlng 
      }); 
google.maps.event.addListener(marker, 'click', function() { 
       info_window.setContent(html); 
       info_window.open(map, marker); 
      }); 
    bounds.extend(latlng); // Here we tell what are next viewport bounds 
} 
function initialize() 
{ 
var myLatLng = new google.maps.LatLng(45.2340684, -75.6287287); 
var myOptions = 
{ 
    zoom: 10, 
    mapTypeControl: true, 
    center: myLatLng, 
    zoomControl: true, 
    zoomControlOptions: 
    { 
     style: google.maps.ZoomControlStyle.SMALL 
    }, 
    StreetViewControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById('map'), myOptions); 
    google.maps.event.addListener 
    (map, 'click', 
    function() 
    { 
    info_window.close(); 
    }); 

    downloadUrl('listings.xml', 
    function (listings_data) 
    { 
    listings_data = xmlParse(listings_data); 
    var markers = listings_data.documentElement.getElementsByTagName('listing'); 
    var geocoder = new google.maps.Geocoder(); 
    for (var i = 0; i < markers.length; i++) 
{ 
geocodeAddress(markers[i]); 
} 
google.maps.event.addListenerOnce(map, 'idle', function() {map.fitBounds(bounds);}); 
}); 
} 
</script> 
</head> 
<body onload="initialize();"> 
<div id="map" style="width: 500px; height: 400px;"></div> 
</body> 
</html> 

記住創建腳本文件夾,你把你的downloadxml.js,因爲它是用路徑爲:<script type="text/javascript" src="scripts/downloadxml.js"></script>也不要忘了添加listings.xml

所以你的文件需要組織爲:

index.html 
scripts/downloadxml.js 
listings.xml 
+0

我做了以上更改,但仍無法正常工作,您能否發佈您的工作代碼? – user2208358 2013-03-27 20:39:58

+0

已添加和需注意的問題:如果您在瀏覽器中直接打開index.html,代碼將無法正常工作從文件夾或桌面......它需要由Web服務器提供(或者它會在控制檯中聲明XMLHttpRequest錯誤,因爲它試圖訪問該.xml文件。)如果標記不會馬上顯示出來,請稍等一下,或者嘗試刷新幾次;) – 2013-03-27 21:20:14

+0

所有文件都在服務器上,我一直在通過localhost/mapmarkers.html訪問它 – user2208358 2013-03-27 21:31:48

0

受Mauno解決方案的啓發,我解決了這個如下S,如果有人可以幫助:

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    info_window = new google.maps.InfoWindow(); 
    var mapOptions = { 
     center: new google.maps.LatLng(40.388397, 0.235348), 
     zoom: 6, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 
} 

function codeAddress(data){ 
    var content = 
      '<div class="bocadillo">' + 
       '<div class="titulo">'+ 
        '<a href="tienda.php?id='+data.id+'">'+data.nombre+'</a>' + 
       '</div>'+ 
       '<div class="content">'+ 
        '<span>Ciudad: </span>'+data.ciudad+'<br />'+ 
        '<span>Dirección: </span>'+data.direccion+'<br />'+ 
        '<span>Teléfono: </span>'+data.telefono+'<br />'+ 
        '<span>Email: </span>'+data.mail+'<br />'+ 
       '</div>'+ 
      '</div>' 
      ; 
    var direccion = data.direccion+", "+data.ciudad+", Spain"; 
    geocoder.geocode({ 'address': direccion}, function(results, status) 
     { 
      if(status == google.maps.GeocoderStatus.OK) 
      { 
       createMarker(results[0].geometry.location, content); 
      } 
     }); 
} 

function createMarker(latlng, html){ 
    var image = "img/general/map_icon.png"; 
    var marker= new google.maps.Marker(
     { 
       map: map, 
       position: latlng, 
       icon: image 
     }); 
    google.maps.event.addListener(marker, 'click', function() { 
     info_window.setContent(html); 
     info_window.open(map, marker); 
    }); 
} 

然後,打電話給他們:

$(document).ready(function(){ 
      initialize(); 
      for(var i=0;i<markers.length;i++){ 
       codeAddress(markers[i]); 
      } 
});