在谷歌地图api中更改地图中心

Question

我想改变地图中心。我的代码如下。

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
      }
    };

    function load() {
      var point2=[];

      // mark infowindow
      downloadUrl("markinfoan.xml", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("time");
          var ss = markers[i].getAttribute("secspray");
          var pd = markers[i].getAttribute("secdis");
          var ms = markers[i].getAttribute("meanspray");
          var td = markers[i].getAttribute("totaldis");
          var tss = markers[i].getAttribute("totalsecspray");
          var tst = markers[i].getAttribute("totalsectime");
          var mpoint = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("latitude")),
              parseFloat(markers[i].getAttribute("longitude")));
          var html = "<b>" + "Time:"+ "</b>"+name +"<br/>" + "<b>" +"Spray:"+"</b>"+ss+"<br/>"+ "<b>" +"MeanSpray:"+"</b>"+ms+"<br/>"+ "<b>" +"TotalsectionSpray:"+"</b>"+tss+"<br/>"+ "<b>" +"Dis:"+"</b>"+pd+"<br/>"+ "<b>" +"Total dis:"+"</b>"+td+"<br/>"+ "<b>" +"Totaltime:"+"</b>"+tst+"<br/>";
          var icon = customIcons[pd] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: mpoint,
            icon: icon.icon
          });
          bindInfoWindow(marker, map, infoWindow, html);
         }
      });
//total route
      downloadUrl("rec_an.xml", function(data) {
          var point1 = [];
          var xml1 = data.responseXML;
          var markers1 = xml1.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers1.length; i++) {
            point1[i] = new google.maps.LatLng(
              parseFloat(markers1[i].getAttribute("latitude")),
              parseFloat(markers1[i].getAttribute("longitude")));
          }  
          var flightPath = new google.maps.Polyline({
          path: point1,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 2.0,
          strokeWeight: 4
          });
          flightPath.setMap(map);
      });   
      // mark infowindow route
      downloadUrl("markinfoan.xml", function(data) {
//          var point2 = [];
          var xml2 = data.responseXML;
          var markers2 = xml2.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers2.length; i++) {
            point2[i] = new google.maps.LatLng(
              parseFloat(markers2[i].getAttribute("latitude")),
              parseFloat(markers2[i].getAttribute("longitude")));
          }  
          var flightPath = new google.maps.Polyline({
          path: point2,
          geodesic: true,
          strokeColor: '#0066FF',
          strokeOpacity: 2.0,
          strokeWeight: 4
          });
          flightPath.setMap(map);
      });          
    alert(point2);
    var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(point2[0]),
        zoom: 12,
        mapTypeId: 'roadmap'
      });
    var infoWindow = new google.maps.InfoWindow;

    } 
    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
          if (request.status === 200) {
              alert("Total route, Infowindow");
              alert(point2[0]);
            } else {
              alert('There was a problem with the request.');
            } 
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>

  </script>

  </head>

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

我想将地图中心从 (37.5,126.9) 更改为 point2[0]。

point2[0]是xml文件中记录的位置。

当我运行我的代码时，“alert(point2)”什么都不代表。我该如何解决？

谢谢。

Answer 1

downloadUrl是异步请求，当point2有值时，需要在其回调函数中使用该值。

downloadUrl("markinfoan.xml", function(data) {
      var xml2 = data.responseXML;
      var markers2 = xml2.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers2.length; i++) {
        point2[i] = new google.maps.LatLng(
          parseFloat(markers2[i].getAttribute("latitude")),
          parseFloat(markers2[i].getAttribute("longitude")));
      }  
      var flightPath = new google.maps.Polyline({
      path: point2,
      geodesic: true,
      strokeColor: '#0066FF',
      strokeOpacity: 2.0,
      strokeWeight: 4
      });
      flightPath.setMap(map);

      // set the map center inside the callback function, where point2 exists
      map.setCenter(point2[point2.length-1]);  // <-- add this sets the center of the map to the last point on the path
  });