谷歌地图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加载

回答

相关问题