带有客户图像的 Google Maps API 多个标记答案

【问题标题】：Google Maps API Multiple Markers With Customer Images带有客户图像的 Google Maps API 多个标记
【发布时间】：2013-08-03 08:37:10
【问题描述】：

首先，我是谷歌地图 api/编程新手。

我们在零售店出售滤水器。我想制作一张地图，在一张地图上包含所有零售店。这样客户就可以找到最近的零售店购买我们的产品。每个零售店的标志是它的标志。

我很难为每个零售店展示特定的徽标。只有默认的谷歌地图红色别针即将出现。

请看下面：

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script>
</head> 
<body>
<div id="map" style="width: 705px; height: 410px;"></div>
 <script type="text/javascript">

var locations = [
['Metro Gross Market - GÜNEŞLİ',41.030258,28.814306,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/metro.png'],
['Tekzen Yapı Market - İSTANBUL MERTER',41.001022,28.888908,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/tekzen.png'],
['Bauhaus - BAKIRKÖY',40.997486,28.885653,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/bauhaus.png'],
['Baumax - SAMSUN',41.263283,36.349628,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/baumax.png'],
['Saturn - FORUM İSTANBUL',41.044228,28.897497,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/saturn.png'],
['Media Markt - Adana M1 AVM',37.019440,35.241714,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/mediamarkt.png'],
['Banio Yapı Market - İZMİR GAZİEMİR',38.331020,27.134804,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/banio.png']
];

var map = new google.maps.Map(document.getElementById('map'), {
panControl: false,
zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: false,


  zoom: 6,
  center: new google.maps.LatLng(39, 33.3),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});




var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    animation: google.maps.Animation.DROP
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
</script>
</body>
</html>

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

为传递给 Marker 对象的选项添加一个“图标”属性：

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: locations[i][4],
    animation: google.maps.Animation.DROP
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
}

【讨论】：

【解决方案2】：

首先，您需要将所有代码放入一个函数中。只有在页面加载时才会调用它。这可以防止您的内联 javascript 在加载 google maps API 之前尝试执行可能出现的问题。

这样您也不必将所有的 javascript 放入页面的正文中。

例如使用您现有的代码...

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script>

 <script type="text/javascript">
function initialize() {
var locations = [
['Metro Gross Market - GÜNEŞLİ',41.030258,28.814306,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/metro.png'],
['Tekzen Yapı Market - İSTANBUL MERTER',41.001022,28.888908,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/tekzen.png'],
['Bauhaus - BAKIRKÖY',40.997486,28.885653,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/bauhaus.png'],
['Baumax - SAMSUN',41.263283,36.349628,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/baumax.png'],
['Saturn - FORUM İSTANBUL',41.044228,28.897497,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/saturn.png'],
['Media Markt - Adana M1 AVM',37.019440,35.241714,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/mediamarkt.png'],
['Banio Yapı Market - İZMİR GAZİEMİR',38.331020,27.134804,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/banio.png']
];

var map = new google.maps.Map(document.getElementById('map'), {
panControl: false,
zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: false,


  zoom: 6,
  center: new google.maps.LatLng(39, 33.3),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});




var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    animation: google.maps.Animation.DROP
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head> 
<body>
<div id="map" style="width: 705px; height: 410px;"></div>
</body>
</html>

【讨论】：