Question

我已经尝试了很多方法来尝试解决这个问题，但我似乎无法找到解决方案。问题是只有第一个位置被添加到我的地图中，其他地方被遗漏了。当我删除自定义图钉图标时，所有位置都正确添加。似乎影响这一点的一行是：

icon: iconType[place.icon]

正如我所说，当我删除此行时，一切都按预期工作。我做错了什么？

以下代码

我在对象中定义了许多地方，如下所示：

var data = [
  {
    "name" : "Hotel A",
    "latlng" : new google.maps.LatLng(-33.636784,19.098212),
    "icon" : "venue",
    "desc" : "This is the venue",
  },
  ...
];

图标的定义如下：

iconType = {
  'oneStar' : 'mapimages/lodging_1star.png',
  'twoStar' : 'mapimages/lodging_2star.png',
  ...
};

我使用for循环将我的位置放在地图上，循环遍历数据变量，如下所示：

var bounds = new google.maps.LatLngBounds();
var map;
var infowindow = new google.maps.InfoWindow({ maxWidth: 300 }); 
var marker;

function initialize() {
  // init map
  var venueLatlng = new google.maps.LatLng(-33.636784,19.098212);
  var mapOptions = {
    zoom: 12,
    center: venueLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  for (var i = 0; i < data.length; i++) { 
    createMarker(data[i]);
  }
  map.fitBounds(bounds);
}

function createMarker(place) {
    bounds.extend(place.latlng);
    marker = new google.maps.Marker({
      position: place.latlng,
      title: place.name,
      map: map,
      icon: iconType[place.icon]
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.desc);
      infowindow.open(map, marker);
    });
}

Answer 1

这对我有用（我没有你的图标，所以我链接到谷歌服务器上的公共图标）：

    <script>
       var map;

var data = [
  {
    "name" : "Venue A",
    "latlng" : new google.maps.LatLng(-33.636784,19.098212),
    "icon" : "venue",
    "desc" : "This is the venue",
  },
  {
    "name" : "Hotel A",
    "latlng" : new google.maps.LatLng(-33.6,19.0),
    "icon" : "oneStar",
    "desc" : "one star",
  },
  {
    "name" : "Hotel B",
    "latlng" : new google.maps.LatLng(-33.4,19.0),
    "icon" : "twoStar",
    "desc" : "two star",
  }
];

iconType = {
  'oneStar' : 'http://maps.google.com/mapfiles/ms/icons/blue.png',
  'twoStar' : 'http://maps.google.com/mapfiles/ms/icons/red.png',
  'venue'   : 'http://maps.google.com/mapfiles/ms/icons/yellow.png'
};

var bounds = new google.maps.LatLngBounds();
var map;
var infowindow = new google.maps.InfoWindow({ maxWidth: 300 }); 
var marker;

function initialize() {
  // init map
  var venueLatlng = new google.maps.LatLng(-33.636784,19.098212);
  var mapOptions = {
    zoom: 12,
    center: venueLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  for (var i = 0; i < data.length; i++) { 
    createMarker(data[i]);
  }
  map.fitBounds(bounds);
}

function createMarker(place) {
    bounds.extend(place.latlng);
    var marker = new google.maps.Marker({
      position: place.latlng,
      title: place.name,
      map: map,
      icon: iconType[place.icon]
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent('<b>'+place.name+'</b><br>'+place.desc);
      infowindow.open(map, marker);
    });
}

      google.maps.event.addDomListener(window, 'load', initialize);
     </script>

在Google地图中使用自定义图钉图标仅显示循环中的第一个位置

1 个答案: