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

问题描述：

我试图让Google Maps实例显示一堆标记，然后当您将鼠标悬停在特定标记上时，将其更改为较大的图像。当鼠标离开新图像区域时，我希望它恢复到原始标记图像。我似乎都在工作，我想在此的jsfiddle喜欢：Google Maps API - 悬停在标记上并显示图像

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/

是表示“如果我们正在做的差”刚下图。

答

尝试这似乎运作

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

这并不工作，谢谢。我仍然不清楚为什么我的原始代码在网站上无法正常工作。也许你可以清楚这一点，所以我知道？ – user1110562

如果我的回答是正确的，请接受它我简单地将代码添加到初始化函数中，并在mapOptions阻止其余的代码后添加地图创建。 – scaisEdge

你的另一个问题..我将如何获得不同的图像加载“鼠标悬停”事件？现在我只是将它编码为一张图片，但希望能够为每个元素提取“locations_programs”数组中使用的图片。 – user1110562

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

相关推荐