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

Local Image object not getting initialized properly in Javascript

本文关键字：初始化 Javascript 映像 对象      更新时间：2024-06-29

我面临一个问题，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, ''];

为什么Map Marker每次都没有初始化？谷歌地图上有我遗漏的东西吗？

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

谢谢。

url为"的google.maps.Icon无效。

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"

在这种情况下，更改代码以传入图像的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;
}

工作小提琴

代码片段：

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>

相关文章：