谷歌地图API多标记

Question

我必须为一家公司制作地图，我必须将公司徽标放在一个标记上，并将容器图标放在其他 10 个标记上 但我不知道该怎么做： 这是我当前的代码：（所以我有第一个带有我的徽标的标记，但它是个人图像，所以看不到标记） 我必须创建一个像“marker2”这样的新变量吗？ 并为图标的每个位置创建新变量？

var nice = new google.maps.LatLng(43.7101728,7.2619532);
var centre = new google.maps.LatLng(43.7101728,7.2619532);
var marker;
var map;

function initialize() { 
  var mapOptions = {
    zoom: 14,
    center: nice,

                };

  

  map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

  marker = new google.maps.Marker({
    map:map,
    draggable:false,
    animation: google.maps.Animation.DROP,
    position: centre,
	icon:'image/abi06B.png'
  });
  
  
  
  google.maps.event.addListener(marker, 'click', toggleBounce);
}

function toggleBounce() {

  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

   

#map-canvas { 
       position: absolute;    
       height: 100%;
       width:100%;
		
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>


  <div id="map-canvas">
    </div>

Answer 1

回答您的问题
do i have to make a new variable like "marker2" ?
这将是一个是和一个否。

您似乎不能 100% 确定这些代码的作用：

  map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

  marker = new google.maps.Marker({
    map:map,
    draggable:false,
    animation: google.maps.Animation.DROP,
    position: centre,
    icon:'image/abi06B.png'
  });

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 行，如果用于在 'map-canvas' 元素中创建 google 地图，并且此函数返回对地图对象的引用，以便您以后可以修改它。

然后，marker = new google.maps.Marker({ map:map,..... 使用您提供的设置（包括标题或图标图像）进行标记。此函数还返回一个引用，它是对您刚刚创建的标记的引用，用于将来可能需要对标记进行修改（更改图标或删除）

所以.. 你需要做new google.maps.Marker 几 (10) 次，可能是在一个循环中。但是如果你以后不需要参考来修改你的标记，你不需要marker2，你可以使用marker

Answer 2

实际上我找到了一个解决方案，看起来....业余爱好者，但它有效

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(43.7101728,7.2619532)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);

  var image = 'image/abi06map.png';
  var image2 = 'image/garbage3.png';
  var Abi = new google.maps.Marker({
      position: new google.maps.LatLng(43.7101728,7.2619532),
      map: map,
      icon: image
  });
  var Container1 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container2 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container3 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container4 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container5 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container6 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container7 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container8 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container9 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container10 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Cannes = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image1
  });
  
}

google.maps.event.addDomListener(window, 'load', initialize);