如何在谷歌地圖中的標記之間劃一條線

Question

我有一個谷歌地圖，我必須從數據庫中顯示數據到谷歌地圖。我已經做到了這一點，我從MySQL數據庫中提取數據到谷歌地圖。所有的城市從數據庫填充，現在我必須在我從數據庫填充的城市之間繪製一條線。這裏是我的代碼到目前爲止，我已經做了..

<script type="text/javascript"> 

     /*This is */ 
     function getCallbackFunction(req, processData) { 

      // Return an anonymous function that listens to the 
      // XMLHttpRequest instance 
      return function() { 

       // If the request's status is "complete" 
       if (req.readyState == 4) { 
        if (req.status == 200) { 

         // Pass the XML payload of the response to the 
         // handler function 
         processData(req.responseXML); 

        } else { 

         // An HTTP problem has occurred 
         alert("HTTP error: "+req.status); 
        } 
       } 
      } 
     } 


     //]]> 
    </script> 

<script type="text/javascript"> 
     //<![CDATA[ 


     var gmarkers = []; 

     function getMarker(id) { 
      for (var i = 0; i <= gmarkers.length; i++) { 
       var marker = gmarkers[i]; 
       if (marker.id == id) { 
        return marker; 
       } 
      } 
      return null; 
     } 

     function load() { 
      if (GBrowserIsCompatible()) { 
       var i = 0; 
       var baseIcon = new GIcon(); 
       baseIcon.iconSize=new GSize(12,12); 
       baseIcon.shadowSize=new GSize(12,12); 
       baseIcon.iconAnchor=new GPoint(6,6); 
       baseIcon.infoWindowAnchor=new GPoint(6,6); 

       var pinIcon = new GIcon(baseIcon, "http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/red-dot.png", null, null); 

       // A function to create the marker and set up the event window 
       function createLibraryMarker(point,name,id) { 

        var baseIcon = new GIcon(); 
        baseIcon.iconSize=new GSize(20,12); 
        baseIcon.shadowSize=new GSize(20,12); 
        baseIcon.iconAnchor=new GPoint(10,6); 
        baseIcon.infoWindowAnchor=new GPoint(10,0); 

        var icon = new GIcon(baseIcon, "images/smaller-library-icon.gif", null, null); 

        var marker = new GMarker(point,icon); 
        // === store the name so that the tooltip function can use it === 
        marker.tooltip = '<div class="tooltip">'+name+'</div>'; 
        marker.id = id; 
        GEvent.addListener(marker, "click", function() { 
         openInfoWindow(marker,"" + id); 
        }); 
        gmarkers[i] = marker; 

        i++; 
        map.addOverlay(marker); 

        // ====== The new marker "mouseover" and "mouseout" listeners ====== 
        GEvent.addListener(marker,"mouseover", function() { 
         showTooltip(marker); 
        });   
        GEvent.addListener(marker,"mouseout", function() { 
         tooltip.style.visibility="hidden" 
        });   
       } 





       // 
       // The list of city markers, loaded only once 
       // 
       var cityMarkers = null; 

       function displayCities() { 
        if (cityMarkers == null) { 
         loadCities(); 
        } else { 
         displayCityMarkers(); 
        } 
       } 

       function loadCities() { 
        // Read the data from data.xml 
        var request = GXmlHttp.create(); 
        request.open("GET", "/maps/LibraryDirectory?method=findAllCities", true); 
        request.onreadystatechange = getCallbackFunction(request, processCityData); 
        request.send(null); 
       } 

       /** 
       * Process the city list in XML form, store it in cityMarkers, 
       * and display the markers. 
       */   
       function processCityData(xmlDoc) { 
        cityMarkers = xmlDoc.documentElement.getElementsByTagName("marker");      
        displayCityMarkers(); 
       } 

       function displayCityMarkers() { 
        map.clearOverlays(); 
        for (var i = 0; i < cityMarkers.length; i++) { 
         // obtain the attribues of each marker 
         var lat = parseFloat(cityMarkers[i].getElementsByTagName("latitude")[0].firstChild.nodeValue); 
         var lng = parseFloat(cityMarkers[i].getElementsByTagName("longitude")[0].firstChild.nodeValue); 
         var id = cityMarkers[i].getElementsByTagName("id")[0].firstChild.nodeValue; 
         var label = cityMarkers[i].getElementsByTagName("name")[0].firstChild.nodeValue; 

         // create the marker 


         createCityMarker(new GLatLng(lat,lng),label,id); 


        } 

       } 


       function createCityMarker(point,name,id) { 

        var marker = new GMarker(point,pinIcon); 
        // === store the name so that the tooltip function can use it === 
        marker.tooltip = '<div class="tooltip">'+name+'</div>'; 
        marker.id = id; 
        marker.point = point; 
        GEvent.addListener(marker, "click", function(point) { 
         map.setCenter(new GLatLng(marker.point.y,marker.point.x),10); 
        }); 
        gmarkers[i] = marker; 

        i++; 
        map.addOverlay(marker); 

        // ====== The new marker "mouseover" and "mouseout" listeners ====== 
        GEvent.addListener(marker,"mouseover", function() { 
         showTooltip(marker); 
        });   
        GEvent.addListener(marker,"mouseout", function() { 
         tooltip.style.visibility="hidden" 
        });   
       } 


       // ====== This function displays the tooltip ====== 
       function showTooltip(marker) { 
        tooltip.innerHTML = marker.tooltip; 
        var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom()); 
        var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom()); 
        var anchor=marker.getIcon().iconAnchor; 
        var width=marker.getIcon().iconSize.width; 
        var height=tooltip.clientHeight; 
        var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y -height)); 
        pos.apply(tooltip); 
        tooltip.style.visibility="visible"; 
       } 

       // ===== This function is invoked when the mouse leaves an entry in the sidebar ===== 
       // It hides the tooltip  
       function mymouseout() { 
        tooltip.style.visibility="hidden"; 
       } 

       var myTrip = { 
        center:x, 
        zoom:4, 
        mapTypeId:google.maps.MapTypeId.ROADMAP 
       }; 

       // create the map 
       var map = new google.maps.Map(document.getElementById("map"),myTrip); 

       map.addControl(new GLargeMapControl()); 
       map.addControl(new GOverviewMapControl()); 
       map.enableDoubleClickZoom(); 
       map.setCenter(new GLatLng(28.6100, 77.2300), 5); 

       // ====== set up marker mouseover tooltip div ====== 
       var tooltip = document.createElement("div"); 
       map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip); 
       tooltip.style.visibility="hidden"; 

       displayCities(); 
       GEvent.addListener(map, "zoomend", function(oldZoom, newZoom) { 
        if ((oldZoom <= 8) && (newZoom > 8)) { 
         // 
         // Switch to city markers 
         // 
         displayLibraries(); 
        } else if ((oldZoom > 8) && (newZoom <= 8)) { 
         // 
         // Switch to library markers 
         // 
         displayCities(); 
        } 

       }); 
      } 

      else { 
       alert("Sorry, the Google Maps API is not compatible with this browser"); 
      } 
     } 
     //]]> 
    </script> 

</head> 
<body onload="load()" onunload="GUnload()"> 
    <div id="map" style="width: 900px; height: 500px"></div> 

VAR緯度，VAR LNG這是緯度和經度從database.i未來已經使用這種LAT長畫線， 有人請幫忙

Answer 1

一般的答案是通過你的cityMarkers數組來處理來自他們的位置的google.maps.LatLng對象數組。使用該數組創建多段線。

該答案適用於v2或v3;細節將取決於你最終使用哪個API（但是作爲v2 is deprecated and scheduled to be turned off/transitioned to a wrapped v3 version that might not work for you，你最好在v3中編寫任何新代碼）。