在Google地图中使用自定义图钉图标仅显示循环中的第一个位置 [英] Using custom pin icon in Google maps only shows first location in loop

问题描述

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

  icon：iconType [place.icon] 
  

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

下面的代码

我有一些

  var data = [
 {
name：酒店A，
latlng：新增google.maps.LatLng（-33.636784,19.098212），
图标：场地，
desc：这是场地，
}，
 ... 
]; 
  

图标定义如下：

  iconType = {
'oneStar'：'mapimages / lodging_1star.png'，
'twoStar'：'mapimages / lodging_2star.png'，
 .. 。
}; 
  

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

  var bounds = new google.maps.LatLngBounds（）; 
 var map; 
 var infowindow = new google.maps.InfoWindow（{maxWidth：300}）; 
 var marker; 
 
函数初始化（）{
 //初始化映射
 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）; 
} 
 
函数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）; 
}）; 
 
  

解决方案

没有你的图标，所以我链接到Google服务器上的公共图标）：

 < script> 
 var map; 
 
 var data = [
 {
name：Venue A，
latlng：new google.maps.LatLng（-33.636784,19.098212） ，
icon：场地，
desc：这是场地，
}，
 {
name：Hotel A ，
latlng：new google.maps.LatLng（-33.6,19.0），
icon：oneStar，
desc：一颗星，
 $ b $ name 
 $ 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'，
'场地'：'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; 
 
函数初始化（）{
 //初始化映射
 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）; 
} 
 
函数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> 
  

I've tried a number of things to try resolve this but I can't seem to find a solution. The problem is that only the first location is added to my map and the other places are left out. When I remove the custom pin icon, all the locations are added correctly. The line that seems to affect this is:

icon: iconType[place.icon]

As I said when I remove this line everything works as expected. What am I doing wrong?

Code below

I have a number of places defined in an object like so:

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

Icons are defined like this:

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

I place my locations on the map using a for loop, looping through the data variable like so:

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

解决方案

This works for me (I don't have your icons, so I linked to public ones on Google's server):

    <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地图中使用自定义图钉图标仅显示循环中的第一个位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！