我正在尝试使用API​​的位置在 map 上放置一些Google Maps标记。我试图建立一个for循环,该循环计算所有JSON数据,并将“驱动程序名称,驱动程序纬度和驱动程序经度”放入数组中。然后,此数组应有助于Google Maps在 map 上列出这些位置。下面的代码示例:

setTimeout(function () {

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(62.457171, 17.350953),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    var url = "http://blackcab.didair.se/api/drivers";
    var name;
    var lat;
    var lon;
    var locations;

    $.getJSON(url,

    function (response) {
        name = response.drivers[n].name;
        lat = response.drivers[n].currentLat;
        lon = response.drivers[n].currentLon;
        for (var n = 0; n < response.drivers.length; n++)
        var locations = [
            [name, lat, lon, n], ];
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        });
}, 3000);

由于我希望它在所有时间内重新加载这些位置,因此该代码位于一个间隔内。
我调查了在Google Chrome浏览器网络开发人员工具中遇到的错误,但后来我遇到了更多错误。有一个简单的解决方案吗?真正的“胡桃夹子”。

提前致谢!

jack

最佳答案

您的代码中似乎有很多错误。大括号除外,例如您在实际拥有声明N的for循环之前使用N。
此外:

您不应该一直在重新创建 map 对象。
maps对象应该在被调用的函数之外。

JSON调用应该是SetInterval函数中的唯一对象。
本质上,每次调用该间隔时,您都将清除并设置标记。

我认为有一些更好的方法:

 <html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Google Maps Multiple Markers</title>
  <script src="http://maps.google.com/maps/api/js?sensor=false"
          type="text/javascript"></script>
</head>
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript">

    var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(20, 32),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(0, 32)
  };
  var shadow = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag_shadow.png',
    // The shadow image is larger in the horizontal dimension
    // while the position and offset are the same as for the main image.
    size: new google.maps.Size(37, 32),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 32)
  };

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        center: new google.maps.LatLng(62.457171, 17.350953),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    setTimeout(function () {
        loadData();
    },500);


    function loadData()
    {
        //alert("Loading");
        var marker, i;

        var url = "http://blackcab.didair.se/api/drivers";
        var name;
        var lat;
        var lon;
        var locations;

        $.getJSON(url, function (response) {handleData(response)});
    }

    function handleData(response)
    {
        //alert(response);
        var n;
        for(n=0; n<response.drivers.length; n++)
        {
            name = response.drivers[n].name;
            //alert(name);
            lat = response.drivers[n].currentLat;
            lon = response.drivers[n].currentLon;
            var myLatLng = new google.maps.LatLng(lat,lon);
            var marker = new google.maps.Marker({
                position: myLatLng,
                shadow: shadow,
                icon:image,
                map: map,
                title: name,
                zIndex: 1
            });
        }
    }



  </script>
</body>
</html>

但是,该特定示例丢失了,您需要删除先前的标记,仅添加新的标记,然后添加信息框。

看看:http://jsfiddle.net/xu7wL/

10-05 20:30
查看更多