var map; var infowindow; function InitializeMap() { var latln" />

Показать данные GPS на карте Google, используя ajax

javascript ajax asp.net-mvc google-maps

526 просмотра

1 ответ

2625 Репутация автора

Я пытаюсь разработать GPS-трекер с использованием MVC.netфункции, которая перезагружает мою карту и указывает, как вы можете видеть здесь:

<script type="text/javascript">
    var map; var infowindow;
    function InitializeMap() {
        var latlng = new google.maps.LatLng(35.7015691, 51.3821045);
        var myOptions =
        {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
    }


    function markicons() {

        InitializeMap();

        var ltlng = [];
        ltlng.push(new google.maps.LatLng(35.790991, 51.417746));
        ltlng.push(new google.maps.LatLng(35.793386, 51.404578));
        ltlng.push(new google.maps.LatLng(35.792612, 51.399404));
        ltlng.push(new google.maps.LatLng(35.787515, 51.391928));
        ltlng.push(new google.maps.LatLng(35.771040, 51.387628));
        ltlng.push(new google.maps.LatLng(35.756908, 51.387241));
        ltlng.push(new google.maps.LatLng(35.725584, 51.381827));
        ltlng.push(new google.maps.LatLng(35.710518, 51.377572));
        ltlng.push(new google.maps.LatLng(35.706555, 51.377470));
        ltlng.push(new google.maps.LatLng(35.705059, 51.377595));
        ltlng.push(new google.maps.LatLng(35.700149, 51.378081));
        ltlng.push(new google.maps.LatLng(35.698232, 51.378313));
        ltlng.push(new google.maps.LatLng(35.697542, 51.378372));
        ltlng.push(new google.maps.LatLng(35.687726, 51.379677));
        ltlng.push(new google.maps.LatLng(35.680949, 51.379919));
        ltlng.push(new google.maps.LatLng(35.676178, 51.380610));
        ltlng.push(new google.maps.LatLng(35.668223, 51.381307));

        map.setCenter(ltlng[0]);
        for (var i = 0; i <= ltlng.length; i++) {
            marker = new google.maps.Marker({
                map: map,
                position: ltlng[i]
            });

            (function (i, marker) {

                google.maps.event.addListener(marker, 'click', function () {

                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }

                    infowindow.setContent("Message" + i);

                    infowindow.open(map, marker);

                });

            })(i, marker);

        }

    }

    window.onload = markicons;

</script>

У меня есть тег div, чтобы привязать функцию к нему,

 <div class="box">
        <div id="map"style="width: 100%; height: 400px">

        </div>

Но, как вы можете видеть, я ставлю свои баллы статически, мне нужно, чтобы моя страница получала данные, используя ajax без обновления страницы.

Вот моя структура базы данных:

введите описание изображения здесь

как вы можете видеть, данные должны быть получены из базы данных

 ltlng.push(new google.maps.LatLng(35.790991, 51.417746));
            ltlng.push(new google.maps.LatLng(35.793386, 51.404578));
            ltlng.push(new google.maps.LatLng(35.792612, 51.399404));
            ltlng.push(new google.maps.LatLng(35.787515, 51.391928));
            ltlng.push(new google.maps.LatLng(35.771040, 51.387628));
            ltlng.push(new google.maps.LatLng(35.756908, 51.387241));
            ltlng.push(new google.maps.LatLng(35.725584, 51.381827));
            ltlng.push(new google.maps.LatLng(35.710518, 51.377572));
            ltlng.push(new google.maps.LatLng(35.706555, 51.377470));
            ltlng.push(new google.maps.LatLng(35.705059, 51.377595));
            ltlng.push(new google.maps.LatLng(35.700149, 51.378081));
            ltlng.push(new google.maps.LatLng(35.698232, 51.378313));
            ltlng.push(new google.maps.LatLng(35.697542, 51.378372));
            ltlng.push(new google.maps.LatLng(35.687726, 51.379677));
            ltlng.push(new google.maps.LatLng(35.680949, 51.379919));
            ltlng.push(new google.maps.LatLng(35.676178, 51.380610));
            ltlng.push(new google.maps.LatLng(35.668223, 51.381307));

Я создаю API для получения данных из базы данных, но я не знаю, как я могу вставить эти данные в Google Map.

public class locationController : ApiController
    {
        // GET: api/location
        public IEnumerable<string> Get()
        {
           avldb db=new avldb();
            return db.locations.tolist():
        }
}
Автор: Ehsan Akbar Источник Размещён: 18.07.2016 11:40

Ответы (1)


-1 плюса

3269 Репутация автора

Я не знаю, я не могу помочь тебе там.

Но вот частичный ответ, который вы можете проверить

С ASP и вашей базой данных вы должны сгенерировать эту строку (она может быть в 1 строке, javascript не волнует).

Чтобы проверить это (и да, это работает), я помещаю это в «data.txt»

[
  {"tlng": [35.790991, 51.417746], "name": "Point 0"},
  {"tlng": [35.793386, 51.404578], "name": "Point 1"},
  {"tlng": [35.792612, 51.399404], "name": "Point 2"},
  {"tlng": [35.787515, 51.391928], "name": "Point 3"},
  {"tlng": [35.771040, 51.387628], "name": "Point 4"},
  {"tlng": [35.756908, 51.387241], "name": "Point 5"},
  {"tlng": [35.725584, 51.381827], "name": "Point 6"},
  {"tlng": [35.710518, 51.377572], "name": "Point 7"},
  {"tlng": [35.706555, 51.377470], "name": "Point 8"},
  {"tlng": [35.705059, 51.377595], "name": "Point 9"},
  {"tlng": [35.700149, 51.378081], "name": "Point 10"},
  {"tlng": [35.698232, 51.378313], "name": "Point 11"},
  {"tlng": [35.697542, 51.378372], "name": "Point 12"},
  {"tlng": [35.687726, 51.379677], "name": "Point 13"},
  {"tlng": [35.680949, 51.379919], "name": "Point 14"},
  {"tlng": [35.676178, 51.380610], "name": "Point 15"},
  {"tlng": [35.668223, 51.381307], "name": "Point 16"}
]

В PHP есть функция, которая превращает объект в эту форму строки, называется json_encode ()

Может быть, это помогает: Сериализация JSON в ASP

затем index.htm (обратите внимание, введите свой собственный ключ https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY] )

<div id="map"></div>
<style>
#map {
  height: 90%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY]" async defer></script>
<script type="text/javascript">
var map; 
var infowindow;

function InitializeMap() {
    var latlng = new google.maps.LatLng(35.7015691, 51.3821045);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    // now we will load the data
    $.ajax({
      url: 'data.txt',
      dataType: 'json',
      success: function(data) {
        // data is now an object that javascript can read.
        // now we feed it to  markicons()
        markicons(data);
      }
    });
}
function markicons(data) {
    map.setCenter(new google.maps.LatLng(Number(data[0].tlng[0]), Number(data[0].tlng[1])));
    for (var i = 0; i <= data.length; i++) {
        marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(Number(data[i].tlng[0]), Number(data[i].tlng[1])),
            title: data[i].name
        });
        (function (i, marker) {
            google.maps.event.addListener(marker, 'click', function () {
                if (!infowindow) {
                    infowindow = new google.maps.InfoWindow();
                }
                infowindow.setContent("Name: " + data[i].name);
                infowindow.open(map, marker);
            });
        })(i, marker);
    }
}

window.onload = InitializeMap;
</script>

Я немного перестроил твои функции. Главное - получить данные вне функции.

Автор: Emmanuel Delay Размещён: 18.07.2016 10:46
Вопросы из категории :
32x32