从数据库动态加载坐标到谷歌地图

Question

我正在研究web dev和ajax;我遇到了这个模板，上面有一张地图（谷歌地图）。用于加载地图的脚本放在外部.js文件中，这里是代码。

    function LoadMapProperty() {
    var locations = new Array(
        [14.4718329, 121.0086019], [14.530026, 120.996063], [14.4737421, 121.0032217], [14.5075023, 120.993699],
        [14.5075023, 120.993699], [14.471466, 121.0277539], [14.4779355, 120.99883], [14.4731542, 121.0037827],
        [14.4966062, 120.9884816], [14.4926289, 120.98628], [14.4779355, 120.99883], [14.4663681, 121.0085009],
        [14.4965154, 120.9895496], [14.527833, 120.996831], [14.4849982, 120.9869173], [14.5016121, 120.9960593],
        [14.4745177, 120.9987967], [14.4745177, 120.9987967], [14.5292715, 120.9960647], [14.4798793, 120.9983465],
        [14.530001, 120.995553], [14.4745177, 120.9987967], [14.4745177, 120.9987967], [14.5292715, 120.9960647],
        [14.4901257, 120.9883528], [14.4799374, 120.9978811], [14.4678564, 120.9801271], [14.4745177, 120.9987967],
        [14.503642, 120.994828], [14.5002999, 120.9973589], [14.5292715, 120.9960647], [14.51565, 120.9960106]
    );
    var markers = new Array();
    var mapOptions = {
        center: new google.maps.LatLng(14.4718329, 121.0086019),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    };

    var map = new google.maps.Map(document.getElementById('property-map'), mapOptions);

    $.each(locations, function(index, location) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[0], location[1]),
            map: map,
            icon: 'http://html.realia.byaviators.com/assets/img/marker-transparent.png'
        });

        var myOptions = {
            content: '<div class="infobox"><div class="image"><img src="http://html.realia.byaviators.com/assets/img/tmp/property-tiny-1.png" alt=""></div><div class="title"><a href="detail.html">1041 Fife Ave</a></div><div class="area"><span class="key">Area:</span><span class="value">200m<sup>2</sup></span></div><div class="price">€450 000.00</div><div class="link"><a href="detail.html">View more</a></div></div>',
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-146, -190),
            zIndex: null,
            closeBoxURL: "",
            infoBoxClearance: new google.maps.Size(1, 1),
            position: new google.maps.LatLng(location[0], location[1]),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };
        marker.infobox = new InfoBox(myOptions);
        marker.infobox.isOpen = false;

        var myOptions = {
            draggable: true,
            content: '<div class="marker"><div class="marker-inner"></div></div>',
            disableAutoPan: true,
            pixelOffset: new google.maps.Size(-21, -58),
            position: new google.maps.LatLng(location[0], location[1]),
            closeBoxURL: "",
            isHidden: false,
            // pane: "mapPane",
            enableEventPropagation: true
        };
        marker.marker = new InfoBox(myOptions);
        marker.marker.open(map, marker);
        markers.push(marker);

        google.maps.event.addListener(marker, "click", function (e) {
            var curMarker = this;

            $.each(markers, function (index, marker) {
                // if marker is not the clicked marker, close the marker
                if (marker !== curMarker) {
                    marker.infobox.close();
                    marker.infobox.isOpen = false;
                }
            });


            if(curMarker.infobox.isOpen === false) {
                curMarker.infobox.open(map, this);
                curMarker.infobox.isOpen = true;
                map.panTo(curMarker.getPosition());
            } else {
                curMarker.infobox.close();
                curMarker.infobox.isOpen = false;
            }

        });
    });
}

function LoadMap() {
    var locations = new Array(
        [14.4718329, 121.0086019], [14.530026, 120.996063], [14.4737421, 121.0032217], [14.5075023, 120.993699],
        [14.5075023, 120.993699], [14.471466, 121.0277539], [14.4779355, 120.99883], [14.4731542, 121.0037827],
        [14.4966062, 120.9884816], [14.4926289, 120.98628], [14.4779355, 120.99883], [14.4663681, 121.0085009],
        [14.4965154, 120.9895496], [14.527833, 120.996831], [14.4849982, 120.9869173], [14.5016121, 120.9960593],
        [14.4745177, 120.9987967], [14.4745177, 120.9987967], [14.5292715, 120.9960647], [14.4798793, 120.9983465],
        [14.530001, 120.995553], [14.4745177, 120.9987967], [14.4745177, 120.9987967], [14.5292715, 120.9960647],
        [14.4901257, 120.9883528], [14.4799374, 120.9978811], [14.4678564, 120.9801271], [14.4745177, 120.9987967],
        [14.503642, 120.994828], [14.5002999, 120.9973589], [14.5292715, 120.9960647], [14.51565, 120.9960106]
    );
    var markers = new Array();
    var mapOptions = {
        center: new google.maps.LatLng(14.4718329, 121.0086019),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    };

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $.each(locations, function(index, location) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[0], location[1]),
            map: map,
            icon: 'http://html.realia.byaviators.com/assets/img/marker-transparent.png'
        });

        var myOptions = {
            content: '<div class="infobox"><div class="image"><img src="http://html.realia.byaviators.com/assets/img/tmp/property-tiny-1.png" alt=""></div><div class="title"><a href="detail.html">1041 Fife Ave</a></div><div class="area"><span class="key">Area:</span><span class="value">200m<sup>2</sup></span></div><div class="price">€450 000.00</div><div class="link"><a href="detail.html">View more</a></div></div>',
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-146, -190),
            zIndex: null,
            closeBoxURL: "",
            infoBoxClearance: new google.maps.Size(1, 1),
            position: new google.maps.LatLng(location[0], location[1]),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };
        marker.infobox = new InfoBox(myOptions);
        marker.infobox.isOpen = false;

        var myOptions = {
            draggable: true,
            content: '<div class="marker"><div class="marker-inner"></div></div>',
            disableAutoPan: true,
            pixelOffset: new google.maps.Size(-21, -58),
            position: new google.maps.LatLng(location[0], location[1]),
            closeBoxURL: "",
            isHidden: false,
            // pane: "mapPane",
            enableEventPropagation: true
        };
        marker.marker = new InfoBox(myOptions);
        marker.marker.open(map, marker);
        markers.push(marker);

        google.maps.event.addListener(marker, "click", function (e) {
            var curMarker = this;

            $.each(markers, function (index, marker) {
                // if marker is not the clicked marker, close the marker
                if (marker !== curMarker) {
                    marker.infobox.close();
                    marker.infobox.isOpen = false;
                }
            });


            if(curMarker.infobox.isOpen === false) {
                curMarker.infobox.open(map, this);
                curMarker.infobox.isOpen = true;
                map.panTo(curMarker.getPosition());
            } else {
                curMarker.infobox.close();
                curMarker.infobox.isOpen = false;
            }

        });
    });
}

function InitMap() {
    google.maps.event.addDomListener(window, 'load', LoadMap);
    google.maps.event.addDomListener(window, 'load', LoadMapProperty);
}

我是这个ajax的新事物，正如我所说的那样，只是想学习东西。与代码一样，您会注意到坐标捆绑在一个数组中。所以我的问题是，有没有办法在我可以从我的数据库中获取一些坐标并将它们放在这个.js脚本中？非常感谢其他网站上的任何链接，建议或提示。 谢谢你的时间。

Answer 1

这里有一些代码可以帮助您入门。

function addMarkers(map, locations) {
    $.each(locations, function(index, location) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[0], location[1]),
            map: map,
            icon: 'http://html.realia.byaviators.com/assets/img/marker-transparent.png'
        });

        var myOptions = {
            content: '<div class="infobox"><div class="image"><img src="http://html.realia.byaviators.com/assets/img/tmp/property-tiny-1.png" alt=""></div><div class="title"><a href="detail.html">1041 Fife Ave</a></div><div class="area"><span class="key">Area:</span><span class="value">200m<sup>2</sup></span></div><div class="price">€450 000.00</div><div class="link"><a href="detail.html">View more</a></div></div>',
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-146, -190),
            zIndex: null,
            closeBoxURL: "",
            infoBoxClearance: new google.maps.Size(1, 1),
            position: new google.maps.LatLng(location[0], location[1]),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };
        marker.infobox = new InfoBox(myOptions);
        marker.infobox.isOpen = false;

        var myOptions = {
            draggable: true,
            content: '<div class="marker"><div class="marker-inner"></div></div>',
            disableAutoPan: true,
            pixelOffset: new google.maps.Size(-21, -58),
            position: new google.maps.LatLng(location[0], location[1]),
            closeBoxURL: "",
            isHidden: false,
            // pane: "mapPane",
            enableEventPropagation: true
        };
        marker.marker = new InfoBox(myOptions);
        marker.marker.open(map, marker);
        markers.push(marker);

        google.maps.event.addListener(marker, "click", function(e) {
            var curMarker = this;

            $.each(markers, function(index, marker) {
                // if marker is not the clicked marker, close the marker
                if (marker !== curMarker) {
                    marker.infobox.close();
                    marker.infobox.isOpen = false;
                }
            });


            if (curMarker.infobox.isOpen === false) {
                curMarker.infobox.open(map, this);
                curMarker.infobox.isOpen = true;
                map.panTo(curMarker.getPosition());
            } else {
                curMarker.infobox.close();
                curMarker.infobox.isOpen = false;
            }

        });
    });
}
// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax( "getlocations.php" ).done(function() {
    addMarkers(map, locations)
});

基本上，代码从getlocations.php上的脚本中获取数据，并使用数据（必须以JSON格式返回）在＆＃34; locations＆＃34;中调用addMarkers。您可以向AJAX添加参数以使其更加灵活，如下所示：

$.ajax(
{
type: "GET",
url: "getlocations.php",
data: { city: "Boston", page: 1 } // or whatever parameters you need to send in the URL
}).done(function() {
    addMarkers(map, locations)
});