Question

我正在尝试使用Google Maps实例显示一堆标记，然后当您将鼠标悬停在特定标记上时，将其更改为更大的图像。当鼠标离开新图像区域时，我希望它恢复到原始标记图像。我好像在这个JSfiddle中一样有效：

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');
        });



    }

唯一的问题是我在测试版网站上使用相同的代码，并且它的工作方式不同。在此网站上，鼠标移除/鼠标移除时不会发生更改，而是点击。

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

这是地图显示在＆＃34;我们在哪里发挥作用＆＃34;。

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

Google Maps API - 将鼠标悬停在标记上并显示图片

1 个答案: