MrB*_*liz 0 jquery json google-maps jquery-ui jquery-ui-autocomplete
我有一个jquery自动完成ui元素,显示了一个火车站列表.当用户从自动完成列表中选择一个工作站时,该功能应该从数据库中返回一组纬度/坐标,并在这些坐标上重新定位地图?
有人在这段代码中发现我的代码错了吗?
// make a json request to get the map data from the Map action
$(function() {
$.getJSON("/Home/Map", initialise);
});
var infowindow = new google.maps.InfoWindow({content: "EMPTY"});
function initialise(mapData) {
var latlng = new google.maps.LatLng(54.466667, -3.233333);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
scaleControl: true,
streetViewControl: false
};
var map = new google.maps.Map($("#map")[0],
myOptions);
$.each(mapData, function (i, location) {
setupLocationMarker(map, location);
});
//Autocomplete
$(function () {
$("#tags").autocomplete({
source: "/Home/StationsList",
minLength: 2,
select: function (event, ui) {
jQuery.ajax({
url: "Home/GetStationLatLong/" + ui.item.value,
dataType: "json",
success: function (data) {
map.setCenter(new google.maps.latLng(data.latitude, data.longitude));
}
});
}
});
});
}
function setupLocationMarker(map, location) {
var latlng = new google.maps.LatLng(location.Latitude, location.Longitude);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: location.Name
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent('<h2>' + location.Name + '</h2>');
infowindow.open(map, marker);
$("#info").text(location.Name);
});
}
Run Code Online (Sandbox Code Playgroud)
通过"Home/GetStationLatLong"请求从服务器返回的JSON如下所示
[{"latitude":53.66314,"longitude":-1.48149}]
Run Code Online (Sandbox Code Playgroud)
尝试
map.setCenter(new google.maps.LatLng(data[0].latitude, data[0].longitude));
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
6470 次 |
| 最近记录: |