Миграция моего HTML API Google MAP версии 2 в версию 3 - PullRequest
7 голосов
/ 02 апреля 2012

Я буду очень признателен за помощь.

Мой html v2 файл с некоторым временным ключом работает нормально.Я получаю местоположения из некоторого XML, создаю маркеры разных цветов и добавляю некоторые URL-адреса также из атрибутов XML в информационном окне (не слишком сложно).Теперь мне нужно перенести это на 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>

1 Ответ

5 голосов
/ 02 апреля 2012

Как вы уже заметили, GDownloadUrl () больше не существует в GMap V3. Я бы порекомендовал jQuery.get (url)

Я опубликовал пример Как разобрать xml-файл на предмет расположения маркеров и графика на карте .

ОБНОВЛЕНИЕ: Как указывает @ user1191860 ниже, есть утилита для GMap V3 xmlparsing . Я не знал об этом. AFAIK, нет причин не использовать его. Вам нужно добавить

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

на вашу HTML-страницу. Интересно, что автор также включает в себя jQuery пример

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...