Question

我正面临一个问题，即For循环中的本地对象未在Javascript中的每次迭代中初始化。

下面的代码工作正常：

function initialize() {
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(-33.9, 151.2)
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    setMarkers(map, beaches);
}

var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 4, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
    ['Coogee Beach', -33.923036, 151.259052, 5, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
    ['Cronulla Beach', -34.028249, 151.157507, 3, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
    ['Maroubra Beach', -33.950198, 151.259302, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png']
];

function setMarkers(map, locations) {
    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];

        var image = {
            url: beach[4],
            size: new google.maps.Size(20, 32),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(0, 32)
        };

        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: beach[0],
            zIndex: beach[3]
        });
    }
}

google.maps.event.addDomListener(window, 'load', initialize)

但是，如果我的第一个数组变为这样，则所有标志都会停止显示。：

['Bondi Beach', -33.890542, 151.274856, 4, ''];

为什么每次都没有初始化地图标记？谷歌地图中有什么东西我在这里缺少吗？

示例代码的JSFiddle链接：http://jsfiddle.net/anujagg/Lrkvu4mu/25/

感谢。

Answer 1

google.maps.Icon无法使用＆＃39;＆＃39;的网址。

var image = {
        url: beach[4],
        size: new google.maps.Size(20, 32),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0, 32)
    };

在这种情况下会生成一个javascript错误：

未捕获的TypeError：无法读取属性＆＃39; dx＆＃39;未定义的

在这种情况下，更改代码以传入null图像：

if (beach[4] != '') {
  var image = {
      url: beach[4],
      size: new google.maps.Size(20, 32),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(0, 32)
  };
} else {
  var image = null;
}

working fiddle

代码段：

＆＃13;

function initialize() {
  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  setMarkers(map, beaches);
}

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4, ''],
  ['Coogee Beach', -33.923036, 151.259052, 5, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['Cronulla Beach', -34.028249, 151.157507, 3, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['Maroubra Beach', -33.950198, 151.259302, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png']
];

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    if (beach[4] != '') {
      var image = {
        url: beach[4],
        size: new google.maps.Size(20, 32),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0, 32)
      };
    } else {
      var image = null;
    }

    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

      html,
      body,
      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

＆＃13;

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

＆＃13;

本地图像对象未在Javascript中正确初始化

1 个答案: