我正在尝试根据存储在 XML 文件中的数据在谷歌地图上创建标记。
<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>