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

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 lat,var lng 这是来自数据库的纬度和经度。我必须使用这个经度和纬度来画线，请有人帮忙

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 中编写任何新代码)。