如何在谷歌地图的标记之间画一条线

Question

I have a google map where i have to show data from the database into google map.I have done this i am fetching data from mysql database into Google map.All the cities are populating from the database,now i have to draw a line between the cities that i am populating from database. here is my code i have done so far..

 <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 lat,var lng this is the latitude and longitude coming from database.i have to draw line using this lat long, someone please help

Answer 1

The general answer is to process through your cityMarkers array to create an array of google.maps.LatLng objects from their positions. Use that array to create a polyline.

That answer works for v2 or v3; the details will depend on which API you end up using (but as v2 is deprecated and scheduled to be turned off/transitioned to a wrapped v3 version that might not work for you , you would be better off writing any new code in v3).