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

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, ''];

为什么地图标记每次都没有初始化？ Google 地图中是否有我遗漏的内容？

JSFiddle link 示例代码：http://jsfiddle.net/anujagg/Lrkvu4mu/25/

谢谢。

Answer 1

google.maps.Icon 对 url 无效。

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 错误：

未捕获的类型错误：无法读取未定义的属性 'dx'

更改代码以在这种情况下为图像传递空值：

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

代码片段：

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

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

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

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

Local Image object not getting initialized properly in Javascript

javascript

google-maps

google-maps-markers