Question

首先，我是一个很棒的时间谷歌地图api /编程newb。

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

我很难为每个零售店展示具体的标识。只有默认的谷歌地图红色针脚即将出现。

请参阅以下内容：

<!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>

Answer 1

将“icon”属性添加到传递给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));
}
}

Answer 2

首先，您需要做的是将所有代码放入函数中。只有在加载页面时才会调用它。这可以防止您的内联JavaScript在加载Google Maps API之前尝试执行的问题。

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

e.g。拿走你现有的代码......

<!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>

带有客户图片的Google Maps API多个标记

2 个答案: