Question

我试图在地图上放置一些Google地图标记，其位置来自API。我试图创建一个计算所有JSON数据的for循环并放置＆＃34; A驱动程序名称，驱动程序纬度和驱动程序经度＆＃34;在一个数组内。然后，这个数组应该帮助谷歌地图在地图上列出theese位置。代码示例如下：

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

此代码位于间隔内，因为我希望它能够在所有时间内重新加载theese位置。我查看了我在Google Chrome网站开发人员工具中遇到的错误，但后来我遇到了更多错误。有一个简单的解决方案吗？一个真实的＆＃34;坚果饼干＆＃34;。

提前致谢！

杰克

Answer 1

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

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

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/

如何从外部JSON数据源在Google地图上放置标记？

1 个答案: