Javascript 使用ajax在google地图上显示gps数据

我正在尝试使用MVC.net开发gps跟踪器，因此我有一个重新加载地图和点的功能，您可以在这里看到：

<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>

我创建了一个api来从数据库中获取数据，但我不知道如何将这些数据插入GoogleMap

public class locationController : ApiController
    {
        // GET: api/location
        public IEnumerable<string> Get()
        {
           avldb db=new avldb();
            return db.locations.tolist():
        }
}

---

我不知道asp，我帮不了你

但这里有一个部分答案，你可以测试

使用ASP和您的数据库，您应该生成这个字符串，它可以在一行上，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

也许这有助于：

然后index.htm注意，输入您自己的键

---

我重新安排了你的功能。主要的事情是获取函数外部的数据

对php文件的Ajax请求，对您有好处吗？你能管理数据库部分吗？@到一个aspx文件而不是php。不确定你想在这里做什么。是否要在用户移动地图时移动地图，并向下拉并加载更多标记？如果是这样的话，一个简单的ajax请求，删除所有不在范围内的标记，添加新标记，就可以了。@pookie事实上我在总线上安装了一个gps，我想从谷歌地图上跟踪它。在这种情况下，我建议你清除所有标记，每10秒左右更新一次-例如，我不会像每1ms一样频繁更新。只需清除地图上的标记，获取您的位置，如果需要周围的标记，只需获取x距离内的所有标记

public class locationController : ApiController
    {
        // GET: api/location
        public IEnumerable<string> Get()
        {
           avldb db=new avldb();
            return db.locations.tolist():
        }
}

[
  {"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"}
]

<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>