javascript 标记数组在 google 地图中未定义 api 3

Question

我尝试使用从 XML 文件中获得的位置在 Google 地图上移动我的标记。我创建了标记并想将它们存储在一个数组中。

markerArray[fzg] = marker;

然后我读取了新的位置，想改变数组中特定标记的位置。每个标记都有一个唯一的 ID，称为 "fzg".

我的 moveMarker 函数总是提示：markerArray 未定义。

找不到问题出在哪里

这里是没有不必要片段的完整代码

<!DOCTYPE html >
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>
<link href="swu.css" rel="stylesheet" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
</head>

<body>

<div id="map"></div>

<script type="text/javascript">

function initialize() {
    //map
    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(48.393866111111, 9.9770183333333),
        zoom: 16,
        mapTypeId: 'roadmap'
        });

    //traffic
    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);
}

markerArray = [];

function createMarkers () {

            //for testing without XML file
            // create for every i 1 marker

            for (var i = 0; i < 1; i++) {

                var pos = new google.maps.LatLng(
                48.393866, 9.977018);

                var marker = new google.maps.Marker({
                    map: map,
                    position: pos,
                });

                marker.setMap( map );

                //store marker in the array with index i
                markerArray[i] = marker;

          } // end for

          moveMarker(map, markerArray);

} // end createMarkers()


function moveMarker(map, markerArray) {

        for (var i = 0; i < 1; i++) {

        //move marker with index i on the map   
        //console says following markerArray is undefined

        markerArray[i].setPosition(new google.maps.LatLng(48.393860, 9.9770199));

        }
    }

initialize();
createMarkers();
setTimeout(moveMarker(), 2500);
</script>



</body>
</html>

CSS 文件:

html, body {
    height: 100%;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#map {
    width: 100%;
    height: 100%;
}

Answer 1

您对第二个函数的调用包含两个参数：

moveMarker(map, markerArray);

但是函数声明时只有一个参数:

function moveMarker(map) {

moveMarker() 正在寻找 markerArray 的更全局范围并找到未定义的变量。

Answer 2

您正在调用不带任何参数的 moveMarker：

setTimeout(moveMarker(), 2500);

当它运行时，markerArray 是未定义的。函数签名是：

function moveMarker(map, markerArray)

解决此问题的一个选项是：

setTimeout(function() {
  moveMarker(map, markerArray)}, 
  2500);

代码片段：

function initialize() {
  //map
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(48.393866111111, 9.9770183333333),
    zoom: 15,
    mapTypeId: 'roadmap'
  });

  //traffic
  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

markerArray = [];

function createMarkers() {

    //for testing without XML file
    // create for every i 1 marker

    for (var i = 0; i < 1; i++) {

      var pos = new google.maps.LatLng(
        48.393866, 9.977018);

      var marker = new google.maps.Marker({
        map: map,
        position: pos,
      });

      marker.setMap(map);

      //store marker in the array with index i
      markerArray[i] = marker;

    } // end for

    moveMarker(map, markerArray);

  } // end createMarkers()

var increment = 0.001;

function moveMarker(map, markerArray) {

  for (var i = 0; i < 1; i++) {

    //move marker with index i on the map   
    //console says following markerArray is undefined
    var position = markerArray[i].getPosition();
    console.log("move marker " + position.toUrlValue(6));
    markerArray[i].setPosition(
      new google.maps.LatLng(
        position.lat(), (position.lng() + increment))
    );
  }
  // markerArray[i].setPosition(new google.maps.LatLng(48.393860, 9.9770199));

}


initialize();
createMarkers();
setInterval(function() {
  moveMarker(map, markerArray)
}, 2500);

html,
body {
  height: 100%;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#map {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

javascript 标记数组在 google 地图中未定义 api 3

javascript array of markers is undefined in google maps api 3

javascript

arrays

maps

google-maps-api-3