从外部xml文件创建标记 [英] Creating markers from external xml file
问题描述
我是Google Maps API的新手.
I am a newbie in Google Maps API.
我有一个包含以下内容的XML文件:
I have a XML file that contains the following:
<?xml version="1.0"?>
-<Customers>-
<Marker category="Production">
<title lang="en">Invensys</title>
<site_location>Neponset Avenue 22, Foxborough, Foxboro, MA, United States</site_location>
<cordinantes>42.066817,-71.24814</cordinantes>
<site_status>Normal</site_status>
</Marker>
<Marker category="Production"><title lang="en">Yokogawa Japan</title>
<site_location>Shinjuku, Tokyo,Japan</site_location>
<cordinantes>36.543915,136.629281</cordinantes>
<site_status>Critical</site_status>
</Marker>
</Customers>
这是JS文件，其中包含读取XML文件并将数据输入到数组的函数，该文件称为func.js.
And this is the JS file containing the function that reads the XML file and enters the data into an array, file is called func.js.
<script src="jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
var markers = [];
$.get('Customers.xml', function(xml) {
var jsonObj = $.xml2json(xml);
$.each(jsonObj.Marker, function(){
var stat = this.site_status == "Critical" ? "redgoogle.png" : "green_marker.png";
var latlng = new google.maps.LatLng (this.cordinantes);
var mark = {
title: this.title,
location: this.site_location,
cord: latlng,
icon: stat
}
markers.push(mark);
});
debugger;
});
此HTML文件包含地图&应该根据标记"数组的内容生成两个标记.
And this HTML file that contains the map & should generate two markers according to the content of the "markers" array.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type='text/javascript' src='func.js'></script>
<script>
markers;
var map;
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(32.637929,-16.934395),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
在使用标记"数组中的数据来生成市场时，我需要帮助. 我该如何使用markers数组来做到这一点?
I need assistance in using the data inside the "markers" array in order to generate markets. How can I use the markers array in order to do that ?
谢谢.
推荐答案
在Initialize函数中执行此操作(如果您确定此时标记已加载):
In the Initialize function do this (if your sure the markers have been loaded at this point):
for(var i=0; i< markers.length; i++){
var marker = new google.maps.Marker({ position: markers[i].cord, map:map });
}
如果尚未加载标记，请创建如下函数:
If the markers have not been loaded create a function like this:
function AddMarkers(){
for(var i=0; i< markers.length; i++){
var marker = new google.maps.Marker({ position: markers[i].cord, map:map });
}
}
并在$.get的回调中调用此函数，如下所示:
And call this function in the callback of your $.get like this:
$.get('Customers.xml', function(xml) {
var jsonObj = $.xml2json(xml);
$.each(jsonObj.Marker, function(){
var stat = this.site_status == "Critical" ? "redgoogle.png" : "green_marker.png";
var latlng = new google.maps.LatLng (this.cordinantes);
var mark = {
title: this.title,
location: this.site_location,
cord: latlng,
icon: stat
}
markers.push(mark);
});
AddMarkers();
debugger;
});
这将添加您的标记，有关如何生成自定义图标的信息，请参见
That will add your markers, for information on how to generate a custom icon refers to
您可以完成功能AddMarkers来生成图标，等等
You can complete the function AddMarkers to generate the icons and so on
这篇关于从外部xml文件创建标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
