2017-02-17 100 views
-1

我想更改地圖中心。我的代碼在下面。在googlemap api中更改地圖中心

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)」表示什麼都沒有。我該如何解決它?

謝謝。

+0

'downloadUrl'是一個異步請求,當它有一個值時,你需要在它的回調函數中使用'point2'的值。 – geocodezip

+0

@geocodezip。感謝您的評論。你能否更具體地解釋一下? –

回答

0

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 
    });  
+0

它的工作原理!我非常感謝你的幫助。謝謝 –

+0

如果這回答了你的問題,請[接受它](http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work) – geocodezip