將我的HTML Google MAP API版本2遷移到版本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//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&amp;v=2&amp;sensor=false&amp;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>

版本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&amp;v=3&amp;sensor=false&amp;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>

來源

2012-04-02 Dejan

正如你指出的GDownloadUrl（）不再GMAP V3存在。我推薦jQuery.get(url)

我發表了一個例子How to parse xml file for marker locations and plot on map。

更新：由於@ user1191860指出下面有一個GMap V3 xmlparsing實用程序。我沒有意識到這一點。 AFAIK，沒有理由不使用它。您需要添加

<script src="http://gmaps-samples-v3.googlecode.com/svn-history/r28/trunk/xmlparsing/util.js"></script>

到您的html頁面。有趣的是，作者還包括一個jQuery example

來源

2012-04-02 15:56:38

嗨，Eric。我發現這個API3 downloadUrl（「example.xml」，function（doc）爲什麼不只是使用它而不是jQuery？這是用於API 3是的？我認爲它更容易和更類似的解決方案 – Dejan 2012-04-04 14:27:53

是的好發現 – 2012-04-04 17:53:21

謝謝@Eric的努力，你能幫我解決這個問題嗎？如果不是謝謝你，那麼http://stackoverflow.com/questions/10013167/google-map-api-3-creating-different-colors-for -markers-from-code-of-api-2 – Dejan 2012-04-04 19:12:45

將我的HTML Google MAP API版本2遷移到版本3

回答

相關問題