使用 Ajax 加载 Google 地图并获取标记答案

【问题标题】：Loading Google Maps and fetching markers with Ajax使用 Ajax 加载 Google 地图并获取标记
【发布时间】：2015-06-30 07:22:57
【问题描述】：

我正在尝试获取和填充 ajax 响应 lat 并记录并在谷歌地图上标记它。问题是，ajax 成功事件中的字符串标记“str”变量不能像“markers = str”那样直接绑定到“markers”变量。但是，当我在“str”变量上放置断点并复制输出并手动使用“标记 = 复制的数据”时，这是可行的。下面显示的代码有效，但是当我取消注释“markers = str”之一时，它不起作用。我不确定我是否需要某种延迟器。请帮忙。

<script>

    //general variables declarations
    var markers;
    var map;

    $("#showdata").click(function () {
        $.when(LoadReports()).done(function () {
            initialize();
        });
    });

    function LoadReports() {

        var Params = {
            startdate: "2015-02-20",
            enddate: "2015-06-22",
            ticketstate: "1",
            city: "Bokaro"
        };

        var arr = [];
        var str;
        $.ajax({
            url: '/Map/GeoReports/GeographycalReports?startdate=' + Params.startdate + '&enddate=' + Params.enddate + '&ticketstate=' + Params.ticketstate + '&city=' + Params.city,
            async: false,
            dataType: 'json',
            success: function (data) {
                $.each(data, function (i, dt) {
                    var msg = '<h6><a href=' + 'http://www.website.com/report.aspx?id=' + dt.PostID + '>' + dt.PostTitle + '</a></h6>Created On: ' + dt.DateCreated + '<br/>Current State: ' + dt.PostState;
                    arr.push("[" + dt.Latitude + ", " + dt.Longitude + ", '" + htmlEncode(msg) + "'" + "]");
                });
                str = '[' + arr.join(',') + ']';
                //markers = str;
            }
        });

        //markers = str;
        markers = [[23.6474369, 86.1573708999999, '<h6><a href=http://www.website.com/report.aspx?id=d87a9eb1-9949-48bd-83cb-c2b1e5f18cbf>this is video post..</a></h6>Created On: 20-Feb-2015, 09:58 AM<br/>Current State: Reported'], [23.7978583, 85.8844404, '<h6><a href=http://www.website.com/report.aspx?id=af10a244-c97d-4b50-8f88-ff7993fb1a93>20/02/2015 event test report heading</a></h6>Created On: 20-Feb-2015, 09:58 AM<br/>Current State: Reported'], [22.790854, 86.1542407, '<h6><a href=http://www.website.com/report.aspx?id=02da0719-5d72-4d7e-8f16-4eb1377b1cf1>22/04/2015 event test report heading</a></h6>Created On: 21-Feb-2015, 09:19 AM<br/>Current State: Reported'], [22.783474, 86.157689, '<h6><a href=http://www.website.com/report.aspx?id=aa946656-52df-4ab6-bbe9-36008cd3156d>21/02/2015 event test report heading</a></h6>Created On: 21-Feb-2015, 01:22 PM<br/>Current State: Reported']];
    }

    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(23.6474369, 86.1573708999999);
        var myOptions = {
            zoom: 9,
            center: latlng,
            mapTypeControl: true,
            mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        addMarker();
    }

    function addMarker() {
        var global_markers = [];

        var infowindow = new google.maps.InfoWindow({});
        for (var i = 0; i < markers.length; i++) {
            var lat = parseFloat(markers[i][0]);
            var lng = parseFloat(markers[i][1]);
            var trailhead_name = markers[i][2];

            var myLatlng = new google.maps.LatLng(lat, lng);

            var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>";

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
            });

            marker['infowindow'] = contentString;

            global_markers[i] = marker;

            google.maps.event.addListener(global_markers[i], 'click', function () {
                infowindow.setContent(this['infowindow']);
                infowindow.open(map, this);
            });
        }
    }

    function htmlEncode(value) {
        return $('<div/>').text(value).html();
    }
</script>

HTML页面：

<input id="showdata" type="button" name="showdata" value="Show on Map" style="margin: inherit;">
<div id="map_canvas" style="width: 550px; height: 450px"></div>

请帮忙。

【问题讨论】：

标签： javascript jquery ajax google-maps google-maps-api-3

【解决方案1】：

谢谢大家，我用更好的方法解决了这个问题。这里是脚本代码，html代码还是一样。

    $("#showdata").click(function () {
        initialize();
    });

    var geocoder;
    var map;
    var places;
    var markers = [];

    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlngCenter = new google.maps.LatLng(23.6474369, 86.1573708999999);
        var mapOptions = {
            center: latlngCenter,
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        fetchPlaces();
    }

    var fetchPlaces = function () {

        var Params = {
            startdate: "2015-02-20",
            enddate: "2015-06-22",
            ticketstate: "1",
            city: "Bokaro"
        };

        var infowindow = new google.maps.InfoWindow({
            content: ''
        });

        $.ajax({
            url: '/Map/GeoReports/GeographycalReports?startdate=' + Params.startdate + '&enddate=' + Params.enddate + '&ticketstate=' + Params.ticketstate + '&city=' + Params.city,
            async: false,
            dataType: 'json',
            success: function (data) {
                $.each(data, function (i, dt) {
                    var msg = '<h6><a href=' + 'http://www.website.com/report.aspx?id=' + dt.PostID + '>' + dt.PostTitle + '</a></h6>Created On: ' + dt.DateCreated + '<br/>Current State: ' + dt.PostState;
                    tmpLatLng = new google.maps.LatLng(dt.Latitude, dt.Longitude);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: tmpLatLng,
                        title: "Coordinates: " + dt.Latitude + " , " + dt.Longitude
                    });
                    bindInfoWindow(marker, map, infowindow, msg);
                });
            }
        });
    }

    var bindInfoWindow = function (marker, map, infowindow, html) {
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(html);
            infowindow.open(map, marker);
        });
    }

【讨论】：