Javascript 使用Ajax加载Google地图和获取标记
我正在尝试获取并填充ajax响应lat和日志，并将其标记在GoogleMap上。问题是，ajax成功事件中的字符串标记'str'变量不能像'markers=str'那样直接绑定到'markers'变量。但是，当我在'str'变量上设置断点并复制输出并手动使用'markers=copied data'时，这是有效的。下面显示的代码可以工作，但当我取消注释其中一个“markers=str”时，它就不工作了。我不确定我是否需要某种拖延。请帮忙Javascript 使用Ajax加载Google地图和获取标记,javascript,jquery,ajax,google-maps,google-maps-api-3,Javascript,Jquery,Ajax,Google Maps,Google Maps Api 3,我正在尝试获取并填充ajax响应lat和日志，并将其标记在GoogleMap上。问题是，ajax成功事件中的字符串标记'str'变量不能像'markers=str'那样直接绑定到'markers'变量。但是，当我在'str'变量上设置断点并复制输出并手动使用'markers=copied data'时，这是有效的。下面显示的代码可以工作，但当我取消注释其中一个“markers=str”时，它就不工作了。我不确定我是否需要某种拖延。请帮忙 <script> //general
<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>
<input id="showdata" type="button" name="showdata" value="Show on Map" style="margin: inherit;">
<div id="map_canvas" style="width: 550px; height: 450px"></div>
请帮忙。谢谢大家，我用了更好的方法解决了这个问题。这里是脚本代码，html代码还是一样的
<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>
$("#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);
});
}