Google Maps API v3：如何动态更改标记图标？

5 回答

• 8

  调用 marker.setIcon('newImage.png') ...查看文档的here .

  你在问这个实际的方法吗？您可以创建每个 div ，并添加一个 mouseover 和 mouseout 侦听器，它将更改图标并返回标记 .

  回复于 2024-04-26T08:04:42+08:00
• 17

  您还可以使用圆圈作为标记图标，例如：

  var oMarker = new google.maps.Marker({
      position: latLng,
      sName: "Marker Name",
      map: map,
      icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 8.5,
          fillColor: "#F00",
          fillOpacity: 0.4,
          strokeWeight: 0.4
      },
  });
  

  然后，如果要动态更改标记（例如鼠标悬停），您可以，例如：

  oMarker.setIcon({
              path: google.maps.SymbolPath.CIRCLE,
              scale: 10,
              fillColor: "#00F",
              fillOpacity: 0.8,
              strokeWeight: 1
          })
  

  回复于 2024-04-26T08:04:42+08:00
• 4

  此线程可能已失效，但StyledMarker可用于API v3 . 只需使用 addDomListener() 方法将所需的颜色更改绑定到正确的DOM事件 . 这个example非常接近您想要做的事情 . 如果查看页面源代码，请更改：

  google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() {
    styleIcon.set("color","#00ff00");
    styleIcon.set("text","Go");
  });
  

  类似于：

  google.maps.event.addDomListener("mouseover",function() {
    styleIcon.set("color","#00ff00");
    styleIcon.set("text","Go");
  });
  

  这应该足以让你继续前进 .

  DOM Events上的维基百科页面也将帮助您定位要在客户端捕获的事件 .

  祝你好运（如果还需要的话）

  回复于 2024-04-26T08:04:42+08:00
• 5

  GMaps Utility Library有一个名为MapIconMaker的插件，可以轻松生成不同的标记样式 . 它使用Google Charts绘制标记 .

  有一个很好的演示here，显示你可以用它做什么样的标记 .

  回复于 2024-04-26T08:04:42+08:00
• 170

  您可以尝试此代码

  <script src="http://maps.googleapis.com/maps/api/js"></script>
  <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
  
  <script>
  
      function initialize()
      {
          var map;
          var bounds = new google.maps.LatLngBounds();
          var mapOptions = {
                              zoom: 10,
                              mapTypeId: google.maps.MapTypeId.ROADMAP    
                           };
          map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
          var markers = [
              ['title-1', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.120850, '<p> Hello - 1 </p>'],
              ['title-2', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.420850, '<p> Hello - 2 </p>'],
              ['title-3', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.720850, '<p> Hello - 3 </p>'],
              ['title-4', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.020850, '<p> Hello - 4 </p>'],
              ['title-5', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.320850, '<p> Hello - 5 </p>']
          ];
  
          var infoWindow = new google.maps.InfoWindow(), marker, i;
          var testMarker = [];
          var status = [];
          for( i = 0; i < markers.length; i++ ) 
          {
              var title = markers[i][0];
              var loan = markers[i][1];
              var lat = markers[i][2];
              var long = markers[i][3];
              var add = markers[i][4];
  
  
              var iconGreen = 'img/greenMarker.png'; //green marker
              var iconRed = 'img/redMarker.png';     //red marker
  
              var infoWindowContent = loan + "\n" + placeId + add;
  
              var position = new google.maps.LatLng(lat, long);
              bounds.extend(position);
  
              marker = new google.maps.Marker({
                  map: map,
                  title: title,
                  position: position,
                  icon: iconGreen
              });
              testMarker[i] = marker;
              status[i] = 1;
              google.maps.event.addListener(marker, 'click', ( function toggleBounce( i,status,testMarker) 
              {
                  return function() 
                  {
                      infoWindow.setContent(markers[i][1]+markers[i][4]);
                      if( status[i] === 1 )
                      {
                          testMarker[i].setIcon(iconRed);
                          status[i] = 0;
  
                      }
                      for( var k = 0; k <  markers.length ; k++ )
                      {
                          if(k != i)
                          {
                              testMarker[k].setIcon(iconGreen);
                              status[i] = 1;
  
                          }
                      }
                      infoWindow.open(map, testMarker[i]);
                  }
              })( i,status,testMarker));
              map.fitBounds(bounds);
          }
          var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event)
          {
              this.setZoom(8);
              google.maps.event.removeListener(boundsListener);
          });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  
  </script>
  
  <div id="mapDiv" style="width:820px; height:300px"></div>
  

  回复于 2024-04-26T08:04:42+08:00