Google Maps API - 悬停在标记上并显示图像答案

【问题标题】：Google Maps API - Hover on markers and show imageGoogle Maps API - 悬停在标记上并显示图像
【发布时间】：2015-07-21 20:06:27
【问题描述】：

我正在尝试让 Google Maps 实例显示一堆标记，然后当您将鼠标悬停在特定标记上时，将其更改为更大的图像。当鼠标离开新图像区域时，我希望它恢复到原始标记图像。我似乎让它在这个 JSfiddle 中按我的意愿工作：

https://jsfiddle.net/vn9po27c/2/

var locations_programs = [
     ['Christie Lake Camp', 44.803033, -76.418031, 1, 'http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png', ''],    
     ['Caldwell Community Centre', 45.373083, -75.735550, 1, 'http://www.christielakekids.com/_images/map_pins/events/caldwell-community-centre.png', ''],    
     ['Dempsey Community Centre', 45.401887, -75.627530, 1, 'http://www.christielakekids.com/_images/map_pins/events/dempsey-community-centre.png', ''],    
     ['Brewer Arena', 45.389560, -75.691445, 1, 'http://www.christielakekids.com/_images/map_pins/events/brewer-arena.png', '']

];

var markersArray = [];
var markers = {};
var mapOptions = {

      center: new google.maps.LatLng(45.4214, -75.6919),
      zoom: 10,
      scrollwheel: true,
      scaleControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoomControl: true,
      zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE,
          position: google.maps.ControlPosition.RIGHT_TOP
        },
      panControl: true,
          panControlOptions: {
          position: google.maps.ControlPosition.TOP_RIGHT
        }
    };


//***  PROGRAMS

    var marker, i;
    var id = 'programs';

    for (i = 0; i < locations_programs.length; i++) {  
      var id = 'programs' + i;

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
        map: map
        ,id: id
        ,icon: 'http://www.christielakekids.com/_images/new/blue_circle.png'
        ,url: locations_programs[i][5]
        ,zIndex:100
      });



        google.maps.event.addListener(marker, 'mouseover', function(event) {
            this.setIcon('http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png');
        });
        google.maps.event.addListener(marker, 'mouseout', function(event) {
            this.setIcon('http://www.christielakekids.com/_images/new/blue_circle.png');
        });



    }

唯一的问题是我在测试版网站上使用了相同的代码，但它的工作方式不一样。在本网站上，更改不会发生在 mouseover / mouseout 上，而是 onclick。

http://www.christielakekids.com/newsite/

这是显示在“我们在哪里有所作为”下方的地图。

【问题讨论】：

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

【解决方案1】：

试试这个看起来功能正常

  <!DOCTYPE html>
    <html>
      <head>
        <title>test sandbox 8</title>

        <style type="text/css">
          #main {
            margin: 60px 15px; 
          }
          #map { 
            min-height: 600px; 
            min-width: 800px; 
          }
        </style>

            <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
        <script>
          // code to draw map
          var map;
          var col = '#FF0000';
          var link ;
          var latLng;
          var polypoints;

          function initialize() {
var locations_programs = [
   ['Christie Lake Camp', 44.803033, -76.418031, 1, 'http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png', ''],    
   ['Caldwell Community Centre', 45.373083, -75.735550, 1, 'http://www.christielakekids.com/_images/map_pins/events/caldwell-community-centre.png', ''],    
   ['Dempsey Community Centre', 45.401887, -75.627530, 1, 'http://www.christielakekids.com/_images/map_pins/events/dempsey-community-centre.png', ''],    
   ['Brewer Arena', 45.389560, -75.691445, 1, 'http://www.christielakekids.com/_images/map_pins/events/brewer-arena.png', '']

];

var markersArray = [];
var markers = {};
var mapOptions = {

    center: new google.maps.LatLng(45.4214, -75.6919),
    zoom: 10,
    scrollwheel: true,
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.RIGHT_TOP
      },
    panControl: true,
        panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
      }
  };

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


 //***  PROGRAMS

  var marker, i;
  var id = 'programs';

  for (i = 0; i < locations_programs.length; i++) {  
    var id = 'programs' + i;

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
      map: map
      ,id: id
      ,icon: 'http://www.christielakekids.com/_images/new/blue_circle.png'
      ,url: locations_programs[i][5]
      ,zIndex:100
    });



      google.maps.event.addListener(marker, 'mouseover', function(event) {
          this.setIcon('http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png');
      });
      google.maps.event.addListener(marker, 'mouseout', function(event) {
          this.setIcon('http://www.christielakekids.com/_images/new/blue_circle.png');
      });



  }
}
  google.maps.event.addDomListener(window, 'load', initialize); 
        </script>
      </head>
      <body>
             <div id="map"></div>
       </body>
    </html>

【讨论】：

这确实有效，谢谢。我仍然不清楚为什么我的原始代码不能在网站上正常工作。也许你可以澄清一下，让我知道？
如果我的回答是正确的，请接受它我只是在初始化函数中添加了您的代码，并在 mapOptions 块之后添加了地图创建，其余的都可以。
你的另一个问题.. 我如何在“鼠标悬停”事件中加载不同的图像？现在我只是将它硬编码到那个图像，但希望能够为每个元素提取“locations_programs”数组中使用的图像。
尝试在鼠标悬停监听器中添加 this.setIcon(locations_programs[i][4])。
首先检查您的代码中是否在全局中声明了 location_programs。否则尝试在回调函数中传递值