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/

是表示「如果我們正在做的差」剛下圖。

來源

2015-07-21 user1110562

嘗試這似乎運作

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

來源

2015-07-21 20:28:58 scaisEdge

這並不工作，謝謝。我仍然不清楚爲什麼我的原始代碼在網站上無法正常工作。也許你可以清楚這一點，所以我知道？ – user1110562

如果我的回答是正確的，請接受它我簡單地將代碼添加到初始化函數中，並在mapOptions阻止其餘的代碼後添加地圖創建。 – scaisEdge

你的另一個問題..我將如何獲得不同的圖像加載「鼠標懸停」事件？現在我只是將它編碼爲一張圖片，但希望能夠爲每個元素提取「locations_programs」數組中使用的圖片。 – user1110562

Google Maps API - 懸停在標記上並顯示圖像

回答

相關問題