1

首先，我很喜欢 google maps api/programing 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>
4

2 回答 2

3

在传递给 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));
}
}
于 2013-08-03T08:57:57.360 回答
1

首先，您需要做的是将所有代码放入一个函数中。只有在页面加载时才会调用它。这可以防止您的内联 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>
于 2013-08-03T08:40:38.710 回答