0

XML ファイルに保存されたデータから Google マップ上にマーカーを作成しようとしています。

<rows>
  <row>
    <Content Type>Case Study</Content Type>
    <Solution Area/ Theme>Efficiency Optimization</Solution Area/ Theme>
    <Ecosystem>Energy & Utilities</Ecosystem>
    <Location>Abu Dhabi</Location>
    <City>Abu Dhabi</City>
    <lat>24.443935</lat>
    <long>54.41905</long>
    <Region>EMEA</Region>
    <Title>TAQA's multinational activity benefits from a single global banking              partner</Title>
  </row>
</rows>

私の XML ファイルは HTML と同じディレクトリにあります。プロットするマーカーは約 100 個あります。この単純なjQueryの例を使用してそれを実行しようとしています(他のことを割り当てた後)。ヘルプ

ここに私のコードがあります

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Common Loader</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
  google.load("maps", "3",  {other_params:"sensor=false"});
  google.load("jquery", "1.3.2");

  function initialize() {
    var myLatlng = new google.maps.LatLng(10, 0);
    var myOptions = {
      zoom: 2,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


    jQuery.get("data.xml", {}, function(data) {
      jQuery(data).find("row").each(function() {
        var marker = jQuery(this);
        var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),
                                    parseFloat(marker.attr("long")));
        var marker = new google.maps.Marker({position: latlng, map: map});
     });
    });
  }

  google.setOnLoadCallback(initialize);
</script>
</head>
<body>
  <div id="map_canvas" style="width:400px; height:300px"></div>
</body>
</html>
4

1 に答える 1

0

これをdoc readyハンドラに入れます：

$(function(){
  jQuery.get("data.xml", {}, function(data) {
    jQuery(data).find("row").each(function() {
      var marker = jQuery(this);
      var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),
                                parseFloat(marker.attr("long")));
      var marker = new google.maps.Marker({position: latlng, map: map});
   });
  });
});
于 2013-01-29T18:16:49.963 に答える