Json 结果 MVC 控制器通过 Jquery 到 Google 地图
Json Result MVC Controller to Google Map via Jquery
我有一个问题,因为我想使用这个返回 Json 列表的 Json 结果,但我的问题是我应该如何调用我将用来对我的 Google 地图进行地理编码和添加标记的 json 结果?我使用了getJson,但它不起作用,但我还没有尝试.ajax函数
这是我的代码集:
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
var minZoomLevel = 4;
var zooms = 7;
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Bounds for North America
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(15.70, -160.50),
new google.maps.LatLng(68.85, -55.90)
);
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function () {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function () {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
}
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function codeAddress() {
var infowindow = new google.maps.InfoWindow();
$.getJson("Dashboard/DashboardIndex",null , function(address) {
$.each(address, function () {
var currVal = $(this).val();
address.each(function () {
geocoder.geocode({ 'address': currVal }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
icon: iconBase + 'man.png',
position: results[0].geometry.location,
title: currVal
})
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(currVal);
infowindow.open(map, marker);
}
})(marker, currVal));
address.push(marker);
}
else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(codeAddress, 2000);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
});
});
});
return false;
}
window.onload = function () {
initialize();
codeAddress();
}
</script>
和我的 Json结果在我的控制器
public JsonResult LoadWorkerList()
{
var workerList = new List<Worker_Address>();
// check if search string has value
// retrieve list of workers filtered by search criteria
var list = (from a in db.Worker_Address
where a.LogicalDelete == false
select a).ToList();
List<WorkerAddressInfo> wlist = new List<WorkerAddressInfo>();
foreach (var row in list)
{
WorkerAddressInfo ci = new WorkerAddressInfo
{
ID = row.ID,
Worker_ID = row.WorkerID,
AddressLine1 = row.Address_Line1 + " " + row.Address_Line2+ " " +row.City + " "+ GetLookupDisplayValById(row.State_LookID),
LogicalDelete = row.LogicalDelete
};
wlist.Add(ci);
}
return Json(wlist.ToList().OrderBy(p => p.AddressLine1), JsonRequestBehavior.AllowGet);
}
我感谢一些可以帮助我提前:)
很难猜测哪里出了问题,因为您没有发布 JSON 格式并且收到您尚未发布的代码错误(到小写)。我认为它在以下领域:
function codeAddress() {
var infowindow = new google.maps.InfoWindow();
$.getJson("Dashboard/DashboardIndex",null , function(address) {
console.log("full json object",address);//<--should show an array of objects
$.each(address, function () {
console.log(this);//<--here you can see what the JSON object is
var currVal = this["AddressLine1"];//<--guess from what your C# code looks like
//next each doesn't make much sense unless you have an array of arrays
// but the C# code makes json for a list (not a list of lists)
您可以将IE用于控制台输出,但不要费心在此处发布输出,因为我已经可以告诉您它将是[对象,对象]。要获得有用的信息,您将不得不将Firefox与Firebug或Chrome一起使用。要查看控制台,您可以按 F12
该行:
setTimeout(codeAddress, 2000);
可以优化,因为现在当您发出太多请求时,您将再次获取整个地址列表并从头开始,而不是"等待"2秒钟并继续您所在的位置。
以下代码:
map.setCenter(results[0].geometry.location);
为什么要在循环中设置地图的中心?它最终会拥有最后找到的地址的中心,因此您不妨在循环外执行此操作,将中心设置为最后找到的地址。
相关文章:
- 在FrontEndphp-ajax-jquery中验证reCaptcha-google
- JQuery BlockUI鼠标加载光标没有't在Google Chrome中返回默认值
- 如何使用外部Javascript库(如jQuery)重命名Google闭包样式表
- 无法在google chrome扩展中使用jquery
- 使用Google Feeds API使用“tap”在jquery mobile中自动生成feed列表
- 将 jQuery 代码翻译成普通的 JavaScript for Google Tag Manager
- 将 jquery .position() 转换为 google maps latlng
- 如何在高级编译模式下使用 Google Closure 编译器编译 jQuery UI 小部件
- jQuery检查自定义Google电子表格页面上输入和下拉列表的更改
- 用于Google Analytics API的jQuery AJAX头验证
- jQuery在使用Bootstrap 3的Google Map v3的信息窗口中工作不完美
- 使用jQuery读取CSV以传递给Google可视化API
- 将Jquery拖放到Google Map V3
- 从Google Maps API返回的jQuery格式时间
- 无论在Google Chrome中做什么,Jquery都不会动画化
- 如何使用 Javascript/jQuery (Ajax) 检索 Google QPX 的结果
- 找不到 Javascript/jQuery Google 地图路线
- jQuery Google Analytics tracking
- 在执行下一个方法之前未完成(javascript jquery google maps v3 api)
- Localhost jquery.google-search-master控制台错误-$.GoogleSearch不是构