谷歌地圖Markerclusterer將不會從XML加載

我想先說我知道這個問題已被問過去，但我無法得到舊的答案工作。我過去7個小時一直在與Google Maps Markercluster進行鬥爭。我對JavaScript比較新，並且能夠爲我的在線目錄建立Google地圖。我發現Makerclusterer，並認爲這將是我的太多標記問題的完美解決方案。問題是，我只知道如何從XML中讀取數據，以及從JSON讀取的示例代碼。嘗試了幾個小時後從XML中讀取數據後，我發現我可以簡單地將我的XML轉換爲JSON格式，這將是一個簡單的解決方法，但這也不起作用。谷歌地圖Markerclusterer將不會從XML加載

這裏的MarkerClusterer例子，我們都知道，愛跑我的服務器上罰款：（集羣文件）

這裏是我的動態生成的XML文件（包含城市名稱，經度和緯度COORDS）：（ XML文件）

以下是MarkerClusterer代碼示例。我讀過幾十個「只需將標記點放入數組中並將其提供給聚類器」的評論，但我現在已經大概失敗了十幾次了。任何輸入讚賞。

<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/data.json"> 
</script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 

<script type="text/javascript"> 
    function initialize() { 
    var center = new google.maps.LatLng(37.4419, -122.1419); 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: center, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var markers = []; 
    for (var i = 0; i < 100; i++) { 
     var dataPhoto = data.photos[i]; 
     var latLng = new google.maps.LatLng(dataPhoto.latitude, 
      dataPhoto.longitude); 
     var marker = new google.maps.Marker({ 
     position: latLng 
     }); 
     markers.push(marker); 
    } 
    var markerCluster = new MarkerClusterer(map, markers); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

來源

2013-04-22 user2246930

那麼，如果您必須使用xml，那麼好消息並不是那麼困難。訪問xml元素的工作方式與訪問正常DOM有很多差異很相似。

需要注意的一件事是來自xml的所有數據都是一個字符串，所以在需要Number的情況下，您必須將其轉換爲Number類型。比如在處理lat時創建google.maps.LatLng等lon值。就加載要讀取的XML而言，我們將使用ajax來加載它。

我舉了一個例子，帶有一些額外的實用工具（注意選擇不同的狀態，以及標記可點擊顯示信息窗口）供您閱讀。爲了簡化ajax請求代碼，我投入了jQuery庫，儘管jQuery也可以用於代碼中的其他內容，但我沒有花時間進行轉換。我很好奇，xml中的'count_unverified'是什麼？好吧，盡情享受吧！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Google Maps MarkerClusterer</title> 
<style type="text/css"> 
.map-infowindow { 
    border:3px ridge blue; 
    padding:6px; 
} 
</style> 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script type="text/javascript"> 

function initialize(elementId, stateAbbr) { 
    var callback = function (data, status, xhr) { 
     //data will be the xml returned from the server 
     if (status == 'success') { 
      createMap(elementId, data); 
     } 
    }; 
    //using jQuery to fire off an ajax request to load the xml, 
    //using our callback as the success function 
    $.ajax(
     { 
      url : 'http://historyads.com/xml_state.php', 
      data : 'state='+ stateAbbr, 
      dataType : 'xml', 
      success : callback 
     } 
    ); 
} 

function createMap(elementId, xml) { 
    var i, xmlMarker, lat, lng, latLng, 
     map = new google.maps.Map(
      document.getElementById(elementId), 
      { 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
     ), 
     infoWindow = new google.maps.InfoWindow({maxWidth:200}), 
     xmlMarkers = xml.getElementsByTagName('marker'), 
     markers = [], 
     latlngs = [], 
     bounds = new google.maps.LatLngBounds(); 
    //private function, for scope retention purposes 
    function createMarker(latlng, name, count_unverified) { 
     latlngs.push(latlng); 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map 
     }); 
     google.maps.event.addListener(
      marker, 
      "click", 
      function() { 
       var info = '<div class="map-infowindow"><h4 class="map-info-title">'; 
       info += name +'</h4><p class="map-info-content">count_unverified: '; 
       info += count_unverified +'</p>'; 
       infoWindow.setContent(info); 
       infoWindow.open(map, marker); 
      } 
     ); 
     markers.push(marker); 
    } 
    for (i = 0; i < xmlMarkers.length; i++) { 
     xmlMarker = xmlMarkers[i]; 
     //lat & lng in the xml file are strings, convert to Number 
     lat = Number(xmlMarker.getAttribute('lat')); 
     lng = Number(xmlMarker.getAttribute('lng')); 
     latLng = new google.maps.LatLng(lat, lng); 
     createMarker(
      latLng, 
      xmlMarker.getAttribute('name'), 
      xmlMarker.getAttribute('count_unverified') 
     ); 
    } 
    markerCluster = new MarkerClusterer(map, markers); 
    for (i = 0; i < latlngs.length; i++) { 
     bounds.extend(latlngs[i]); 
    } 
    map.fitBounds(bounds); 
    return map; 
} 

function buildStatesSelect() { 
    var i, 
     select = document.getElementById('stateSelect'), 
     states = [ 
      'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 
      'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 
      'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 
      'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 
      'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY' 
     ], 
     len = states.length; 
    for (i = 0; i < len; i++) { 
     addOption(select, new Option(states[i], states[i])); 
    } 
    select.onchange = function() { 
     var opt = this.options[this.options.selectedIndex]; 
     if (opt.value != '') { 
      initialize('map', opt.value); 
     } 
    }; 
} 

function addOption(select, option) { 
    try { 
     select.add(option,null); //standard method 
    } catch(er) { 
     select.add(option); //IE only 
    } 
} 

google.maps.event.addDomListener(
    window, 
    'load', 
    function() { 
     initialize('map', 'FL'); 
     buildStatesSelect(); 
    } 
); 

</script> 
</head> 
<body> 
<div id="map" style="width:500px; height:500px;"></div> 
<select id="stateSelect"> 
<option value="">Select State</option> 
</select> 
</body> 
</html>

來源

2013-04-22 12:05:00 astupidname

非常感謝，astupidname！這工作完美。 count_unverified只是一個給定城市的商店數量。 – user2246930 2013-04-22 19:33:45

谷歌地圖Markerclusterer將不會從XML加載

回答

相關問題