从XML文件中提取GPS坐标并插入Google地图?

时间:2011-03-12 12:41:10

标签: php xml google-maps google-maps-api-3 coordinates

我正在尝试从XML文件中提取名称和卫星协调,然后将其插入带有标记的Google地图概览中,但我遇到了困难。

我已经有了PHP代码,我在那里提取我需要的元素,但是从那里开始实际将它们插入谷歌地图就是我把头靠在墙上的地方。

我已经找到并试用了这段代码:

<script src="http://maps.google.com/maps?file=api&v=2&key=my_google_api_key" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 var map = null;
 var geocoder = null;
 function load() {
 if (GBrowserIsCompatible()) {
 map = new GMap2(document.getElementById("map"));
 map.addControl(new GSmallMapControl());

geocoder = new GClientGeocoder();

// my XML file
GDownloadUrl("maste.xml", function(data) {
var xml = GXml.parse(data);
//MasteIBrug is the tag around each child
var markers = xml.documentElement.getElementsByTagName("MasteIBrug");
for (var i = 0; i < markers.length; i++) {
//Positionsvejnavn is my first attribute in the XML file
 var name = markers[i].getAttribute("Positionsvejnavn");
//Geografisk_placering is my second attribute in the XML file
 var coordination  = markers[i].getAttribute("Geografisk_placering");
 showCoor(coordination,name);
}
});

}
}

function showCoor(coordination, name) {
if (geocoder) {
geocoder.getLatLng(
name+","+coordination,
function(point) {
if (!point) {
 alert(coordination + " not found");
} else {
map.setCenter(point, 13);
var marker = createMarker(point, name, coordination);
map.addOverlay(marker);
}
});

}

}

function createMarker(point, name, coordination) {
var marker = new GMarker(point);
var html = "<b>" + name + "</b> <br/>" + coordination;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});

return marker;
}

//]]>

</script>

</head>

<body onload="load()" onunload="GUnload()">
<div>
<div id="map" style="width: 1000px; height: 600px"></div>
</div>
</body>

这是我第一次玩Google地图API,所以我可能会出错或使用错误的代码进行创建,但我似乎无法再深入了解。

非常感谢任何帮助或建议。

2 个答案:

答案 0 :(得分:3)

您的代码段

var markers = xml.documentElement.getElementsByTagName("MasteIBrug");
for (var i = 0; i < markers.length; i++) {
    // Positionsvejnavn is my first attribute in the XML file
    var name = markers[i].getAttribute("Positionsvejnavn");
    // Geografisk_placering is my second attribute in the XML file
    var coordination = markers[i].getAttribute("Geografisk_placering");
}

您是否尝试更改上面的代码,以便for循环中的变量与xml属性具有相同的名称。这使得代码更易于阅读和遵循,并且您不太可能忘记每个人正在做的事情。

其次让你的xml文件在文本编辑器或其他任何东西中打开(甚至在单独的选项卡或窗口中显示为网页中的xml)然后,在for循环中,在解析xml之后添加这行代码。

document.getElementbyId("map").innerHTML = "Positionsvejnavn = " + name;

这应该在解析xml文件中的第一个属性并将其打印到屏幕后停止运行脚本,并且您希望看到xml中的任何值保存atributre Positionsvejnavn

如果有任何屏幕输出,它与Positionsvejnavn中的相同 像这样再次重复

document.getElementbyId("map").innerHTML = "Geografisk_placering = " + coordination; 

并查看是否显示xml中的内容“Geografisk_placering”如果是,那么如果你知道在继续之前你是否正确解析它,那么你正在正确解析xml。

为了可靠的调试,

和正确的代码应该是这样的

document.getElementbyId("map").innerHTML = "cordination = " + coordination;

易于理解和调试,并且专注于变量正在执行什么功能,他们执行什么功能以及记住您对输出的期望。

最后谷歌希望xml标记在xml文件中采用某种格式。就像这样

<markers>
    <marker name="my name whatever" 
        address="an address of somewhere"
        lat="52,00"
        lng="0.223"
    </marker>
    <marker name="my friends whatever" 
        address="an address of somewhere else"
        lat="-52,00"
        lng="-120.223"
    </marker>
</markers>

并且您已将所有文件放在一个目录中并正确引用了一些Web构建器和文本编辑器放在一个额外的/在目录中的hrefs等等其他人将它们遗漏。

因此您可能会从不同的应用程序中获得不同的网址,例如

APP A可能会破坏一个url,就像这个/directory/file.xml一样 APP B可能会将其破坏为像//directory/file.xml一样 并且您必须根据您的设置添加或删除斜杠。

并且您是否尝试将所有文​​件放入本地服务器并从那里运行和/或上述所有文件的组合。

答案 1 :(得分:2)

如果您愿意使用库,jquery-ui-map可以为您提供很多帮助。它支持从JSON,HTML等创建Google Maps标记。我刚刚在一个项目中使用它,它对我帮助很大。