将我的HTML Google MAP API版本2迁移到版本3 [英] Migrating my HTML Google MAP API version 2 to version 3
本文介绍了将我的HTML Google MAP API版本2迁移到版本3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我会非常感谢这方面的帮助。
有一些临时密钥的我的html v2文件正常工作。我从某些XML获取位置，创建不同的颜色标记，并在Info窗口中添加一些来自XML属性的URL（不是太复杂）。现在我需要将其迁移到v3。我发现了一些v2函数的等价物，但我没有找到GDownloadUrl（用于加载XML）以及GIcon（G_DEFAULT_ICON）;有人可以看看我的两个代码，并告诉我如何改变，以使其在v3中也可以使用。我改变了大部分的东西，所以如果有人可以看到一些错误，我会很感激。提前致谢。
版本2：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html>
< head>
< title> Google地图< / title>
< script src =http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyA4UDNP6MZtype =text / javascript >< /脚本>
< / head>
< body onunload =GUenter code herenload（）>
<！ - 您可以将表格或div用于整体布局 - >
< table border = 1>
< tr>
< td>
< div id =mapstyle =width：1250px; height：1250px>< / div>
< / td>
< / tr>
< / table>
< script type =text / javascript>
//<！[CDATA [
if（GBrowserIsCompatible（））{
var gmarkers = [];
//创建标记并设置事件窗口的函数
函数createMarker（point，name，alarm，markerOptions）{
var marker = new GMarker（point，的MarkerOptions）;
GEvent.addListener（marker，click，function（）{
var alarmanchor1 ='< span class =url>< a href = '+ alarm;
var alarmanchor2 ='title =wwwtarget =_ blank> Event List< / a>< / span>';
var alarmanchor = alarmanchor1 + alarmanchor2;
marker.openInfoWindowHtml（alarmanchor）;
}）;
返回标记;
}
//此函数获取点击并打开相应的信息窗口
函数myclick（i）{
GEvent.trigger（gmarkers [i]，点击）;
}
//创建地图
var map = new GMap2（document.getElementById（map））;
map.addControl（new GLargeMapControl（））;
map.addControl（new GMapTypeControl（））;
map.setCenter（new GLatLng（41.932797,21.483765），10）;
//从alerts33.xml读取数据
GDownloadUrl（alarms33.xml，function（doc）{
var xmlDoc = GXml.parse（doc ）;
var markers = xmlDoc.documentElement.getElementsByTagName（marker）;
for（var i = 0; i< markers.length; i ++）{
/ /获得每个标记的属性
var lat = parseFloat（markers [i] .getAttribute（lat））;
var lng = parseFloat（markers [i] .getAttribute（lng）） ;
var point = new GLatLng（lat，lng）;
var alarm = markers [i] .getAttribute（alarm）;
var label = markers [i] .getAttribute（标签）;
var severity = parseFloat（markers [i] .getAttribute（severity））;
var severityIcon = new GIcon（G_DEFAULT_ICON）;
var color;
if（severity == 0）color =66FF33;
else if（severity == 1）color =990099;
else if（severity == 2）color = 00CCFF;
else if（severity == 3）color =FFFF00;
else if（severity == 4）color =FFCC00;
else if（severity == 5）color =FF3300;
else color =yellow;
severityIcon.image =http://www.googlemapsmarkers.com/v1/+ color;
severityIcon.iconSize =新的GSize（15，30）;
markerOptions = {icon：severityIcon};
//创建标记
var marker = createMarker（point，label，alarm，markerOptions）;
map.addOverlay（marker）;
}
}）;
}
其他{
alert（对不起，Google Maps API与此浏览器不兼容）;
}
//]]>
< / script>
< / body>
< / html>
版本3：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd >
< html>
< head>
< title> Google地图< / title>
< script src =http://maps.google.com/maps?file=api&v=3&sensor=false&key=AIzaSyDsa1LyWOQtype =text / javascript >< /脚本>
< / head>
< body onunload =initialize（）>
<！ - 您可以将表格或div用于整体布局 - >
< table border = 1>
< tr>
< td>
< div id =mapstyle =width：1250px; height：1250px>< / div>
< / td>
< / tr>
< / table>
//<！[CDATA [
var gmarkers = [];
//创建标记并设置事件窗口的函数
函数createMarker（point，name，alarm，markerOptions）{
var marker = new google.maps。标记（点，的MarkerOptions）;
google.maps.event.addListener（marker，click，function（）{
var alarmanchor1 ='< span class =url>< a href ='+ alarm;
var alarmanchor2 ='title =www.skolaznanja.comtarget =_ blank>事件列表< / a>< / span>';
var alarmanchor = alarmanchor1 + alarmanchor2;
var infoWindow = new google.maps.InfoWindow（）;
infoWindow.setContent（alarmanchor）;
infowindow.open（map，marker）;
}）;
返回标记;
}
//此函数获取点击并打开相应的信息窗口
函数myclick（i）{
google.maps.event .trigger（gmarkers [i]，click）;
//创建地图
函数initialize（）{
var mapDiv = document.getElementById（map） ;
var map;
var myLatlng = new google.maps.LatLng（41.932797,21.483765）;
var myOptions = {
zoom：10，
center：myLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（mapDiv，myOptions）;
// var map = new google.maps.Map（document.getElementById（map））;
//map.addControl（new GLargeMapControl（））;
//map.addControl（new GMapTypeControl（））;
//map.setCenter(new google.maps.LatLng（41.932797,21.483765），10）;
//从example.xml读取数据
GDownloadUrl（alarms44.xml，function（doc）{
var xmlDoc = GXml.parse（doc ）;
var markers = xmlDoc.documentElement.getElementsByTagName（marker）;
for（var i = 0; i< markers.length; i ++）{
/ /获得每个标记的属性
var lat = parseFloat（markers [i] .getAttribute（lat））;
var lng = parseFloat（markers [i] .getAttribute（lng）） ;
var point = new google.maps.LatLng（lat，lng）;
var alarm = markers [i] .getAttribute（alarm）;
var label = markers [i] .getAttribute（label）;
var severity = parseFloat（markers [i] .getAttribute（severity））;
var severityIcon = new GIcon（G_DEFAULT_ICON）;
var color;
if（severity == 0）color =66FF33;
else if（severity == 1）color =990099 ;
else if（severity == 2）color =00CCFF;
else if（severity == 3）color =FFFF00;
else if（severity == 4）color =FFCC00;
else if（severity == 5）color =FF3300;
else color =yellow;
severityIcon.image =http://www.googlemapsmarkers.com/v1/+ color;
severityIcon.iconSize =新的GSize（15，30）;
markerOptions = {icon：severityIcon};
//创建标记
var marker = createMarker（point，label，alarm，markerOptions）;
map.setMap（marker）;
}
}）;
//]]>
< / script>
< / body>
< / html>
解决方案
正如您所注意到的GDownloadUrl（）不再存在在GMap V3中。我建议 jQuery.get（url）
我发布了一个示例如何为标记位置解析xml文件并在地图上绘图。
更新：正如@ user1191860指出的，GMap V3有一个实用工具 xmlparsing 。我没有意识到这一点。 AFAIK，没有理由不使用它。
您需要添加
< script src =http：//gmaps-samples-v3.googlecode。 COM / SVN历史/ R28 /中继/ xmlparsing / util.js中>< /脚本>
到您的html页面。
有趣的是，作者还包括一个jQuery 示例
I will really appreciate help for this.
My html v2 file with some temporary key works fine. I am getting locations from some XML, create different colors markers and add some URLs also from XML attributes in Info Window(not too much complicated). Now I need to migrate this to v3. I found some equivalents for functions from v2 but I didn't find for GDownloadUrl( for loading XML) and also GIcon(G_DEFAULT_ICON); Can someone please look at both of my codes and tell me how to change to make this works also in v3. I changed most of the things so if someone can see some error I will be thankful. Thanks in advance.
Version 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyA4UDNP6MZ" type="text/javascript"></script>
</head>
<body onunload="GUenter code herenload()">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 1250px; height: 1250px"></div>
</td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var gmarkers = [];
// A function to create the marker and set up the event window
function createMarker(point,name,alarm,markerOptions) {
var marker = new GMarker(point,markerOptions);
GEvent.addListener(marker, "click", function() {
var alarmanchor1='<span class="url"><a href="' + alarm;
var alarmanchor2='" title="www" target="_blank">Event List</a></span>';
var alarmanchor=alarmanchor1+alarmanchor2;
marker.openInfoWindowHtml(alarmanchor);
});
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 41.932797,21.483765), 10);
// Read the data from alarms33.xml
GDownloadUrl("alarms33.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var alarm = markers[i].getAttribute("alarm");
var label = markers[i].getAttribute("label");
var severity = parseFloat(markers[i].getAttribute("severity"));
var severityIcon = new GIcon(G_DEFAULT_ICON);
var color;
if (severity == 0) color = "66FF33";
else if (severity == 1) color = "990099";
else if (severity == 2) color = "00CCFF";
else if (severity == 3) color = "FFFF00";
else if (severity == 4) color = "FFCC00";
else if (severity == 5) color = "FF3300";
else color = "yellow";
severityIcon.image = "http://www.googlemapsmarkers.com/v1/" + color;
severityIcon.iconSize = new GSize(15, 30);
markerOptions = { icon:severityIcon };
// create the marker
var marker = createMarker(point,label,alarm,markerOptions);
map.addOverlay(marker);
}
});
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
</body>
</html>
Version 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=3&sensor=false&key=AIzaSyDsa1LyWOQ" type="text/javascript"></script>
</head>
<body onunload="initialize()">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 1250px; height: 1250px"></div>
</td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
var gmarkers = [];
// A function to create the marker and set up the event window
function createMarker(point,name,alarm,markerOptions) {
var marker = new google.maps.Marker(point,markerOptions);
google.maps.event.addListener(marker, "click", function() {
var alarmanchor1='<span class="url"><a href="' + alarm;
var alarmanchor2='" title="www.skolaznanja.com" target="_blank">Event List</a></span>';
var alarmanchor=alarmanchor1+alarmanchor2;
var infoWindow=new google.maps.InfoWindow();
infoWindow.setContent(alarmanchor);
infowindow.open(map,marker);
});
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// create the map
function initialize() {
var mapDiv = document.getElementById("map");
var map;
var myLatlng = new google.maps.LatLng(41.932797,21.483765);
var myOptions = {
zoom:10,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapDiv, myOptions);
}
//var map = new google.maps.Map(document.getElementById("map"));
//map.addControl(new GLargeMapControl());
//map.addControl(new GMapTypeControl());
//map.setCenter(new google.maps.LatLng( 41.932797,21.483765), 10);
// Read the data from example.xml
GDownloadUrl("alarms44.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var alarm = markers[i].getAttribute("alarm");
var label = markers[i].getAttribute("label");
var severity = parseFloat(markers[i].getAttribute("severity"));
var severityIcon = new GIcon(G_DEFAULT_ICON);
var color;
if (severity == 0) color = "66FF33";
else if (severity == 1) color = "990099";
else if (severity == 2) color = "00CCFF";
else if (severity == 3) color = "FFFF00";
else if (severity == 4) color = "FFCC00";
else if (severity == 5) color = "FF3300";
else color = "yellow";
severityIcon.image = "http://www.googlemapsmarkers.com/v1/" + color;
severityIcon.iconSize = new GSize(15, 30);
markerOptions = { icon:severityIcon };
// create the marker
var marker = createMarker(point,label,alarm,markerOptions);
map.setMap(marker);
}
});
//]]>
</script>
</body>
</html>
解决方案
As you've noted GDownloadUrl() no longer exists in GMap V3. I'd recommend jQuery.get(url)
I posted an example How to parse xml file for marker locations and plot on map.
UPDATE: As @user1191860 points out below there is a utility for GMap V3 xmlparsing. I was not aware of it. AFAIK, no reason not to use it. You need to add
<script src="http://gmaps-samples-v3.googlecode.com/svn-history/r28/trunk/xmlparsing/util.js"></script>
to your html page. Interesting that the author also includes a jQuery example
这篇关于将我的HTML Google MAP API版本2迁移到版本3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
