google.maps.setCenter() 纬度 &通过 jquery.ajax() 请求经度

发布于 2024-12-03 14:18:12 字数 1975 浏览 1 评论 0原文

我有一个 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);
});     

}

“Home/GetStationLatLong”请求从服务器返回的 JSON 如下所示

[{"latitude":53.66314,"longitude":-1.48149}]

I've got an jquery autocomplete ui element that shows a list of rail stations. When a user selects a Station from the autocomplete list, the function should return a set of latitude/Coordinates from the db and recenter the map over those cordinates?

Anyone spot where i'm code wrong in this code?

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

}

The JSON Returned from the server by the "Home/GetStationLatLong" request looks like this

[{"latitude":53.66314,"longitude":-1.48149}]

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

旧时浪漫 2024-12-10 14:18:12

尝试

map.setCenter(new google.maps.LatLng(data[0].latitude, data[0].longitude));

try

map.setCenter(new google.maps.LatLng(data[0].latitude, data[0].longitude));
人生百味 2024-12-10 14:18:12

也许您正在寻找这个

success: function (data){
  //map.setCenter(new google.maps.latLng(coordinates[0].latitude, data.longitude));
   var coordinates = $.parseJON(data);
   map.panTo(new google.maps.LatLng(coordinates[0].latitude, coordinates[0].longitude));
}

Maybe your looking for this

success: function (data){
  //map.setCenter(new google.maps.latLng(coordinates[0].latitude, data.longitude));
   var coordinates = $.parseJON(data);
   map.panTo(new google.maps.LatLng(coordinates[0].latitude, coordinates[0].longitude));
}
你的笑 2024-12-10 14:18:12

成功函数应该是这样的:

success: function(data) {
    google.maps.setCenter(new google.maps.latLng(data.latitude, data.longitude));
}

The success function should be like:

success: function(data) {
    google.maps.setCenter(new google.maps.latLng(data.latitude, data.longitude));
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文