5

我正在尝试在我的地图上使用 API 中的位置放置一些 Google 地图标记。我尝试制作一个计算所有 JSON 数据的 for 循环，并将“驱动程序名称、驱动程序纬度和驱动程序经度”放入数组中。那么这个数组是否应该帮助谷歌地图在地图上标出这些位置。下面的代码示例：

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 网络开发工具中遇到的错误，但后来我遇到了更多错误。有一个简单的解决方案吗？一个真正的“胡桃夹子”。

提前致谢！

杰克

4

1 回答 1

5

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

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

JSON 调用应该是您的 SetInterval 函数中的唯一内容。本质上，您将在每次调用 inerval 时清除和设置标记。

我认为接近这个的东西更好：

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

于 2013-04-11T15:45:22.603 回答