Question

我正在尝试使用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>

我有一个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来从数据库中获取数据，但我不知道如何将这些数据插入谷歌地图。

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

Answer 1

我不知道asp，我无法帮助你。

但这是一个可以测试的部分答案

使用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 Serialization in 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>

我重新安排了你的功能。主要是将数据放在函数之外。

使用ajax在谷歌地图上显示gps数据

1 个答案: