Question

我必须使用来自数据库的标记和折线制作谷歌地图。我能够从我的html页面中的数据库获取数据，但我无法创建标记和它们之间的线。这是我的代码......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>A Map of New Zealand</title>
    <style type="text/css">
        .tooltip {
            background-color:#ffffee;
            font-weight:bold;
            font-size:10px;
            border:1px #c6c3a5 solid;
        }

        .library-title-line {
            font-weight:bold;
            font-size:10px;
            display:block;

        }      
        .library-details-line {
            font-size:10px;
            display:block;
        }      

    </style>

    <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>

    <!-- GOOGLE MAPS -->
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAATjlq5e04CjtYAFELAT_MzhQT6W9ahK7sA22kHs_1YSzN-mRedxRoqguZ08pEVBcJstFh9DGuLt__Pw"
    type="text/javascript"></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);
                }

                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);                            
                        //document.write("///"+lat);
                       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 google.maps.LatLng(lat,lng),label,id);


                    }
                }

                function createCityMarker(point,name,id) {

                    var startLatLng= new google.maps.LatLng(28.6100,77.2300);   
                    document.write(point);
                    new google.maps.Marker({
                        position: point, 
                        map: map, 
                        icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/red-dot.png'
                    });

                    new google.maps.Polyline({
                        path: [startLatLng, point],
                        strokeColor: "#FF0000",
                        strokeOpacity: 1.0,
                        strokeWeight: 2,
                        map: map
                    });
                }

                // create the map
                var map = new GMap2(document.getElementById("map"));
                     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>


</body>
</html>

我可以打印lat-long值，但无法将其设置为标记和绘制线..请帮帮我..

如何在Google地图中从数据库中绘制标记和折线

0 个答案: