Question

我试图获取并填充ajax响应lat并记录并在谷歌地图上标记它。问题是，字符串标记＆＃39; str＆＃39;在ajax成功事件中的变量不能绑定到＆＃39;标记＆＃39;变量直接类似于＆＃39; markers = str＆＃39;。但是，当我把断点放在＆＃39; str＆＃39;变量和复制输出和手动使用的＆＃39; markers =复制数据＆＃39;，这是有效的。下面显示的代码有效，但是当我取消评论其中一个标记= str＆＃39;这是行不通的。我不确定我是否需要某种延迟器。请帮忙。

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

请帮忙。

Answer 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);
        });
    }

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

1 个答案: