谷歌地图标记悬停效果

时间：2018-08-12 09:36:21

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

我有一些带有标记的google地图：

var locations = [
  {
    'name'    : 'Location 1',
    'adress'  : '215 West Girard Avenue 19123',
    'location':{
      'lat' : 39.9695601,
      'lon' : -75.1395161
    },
    'lable'   : '200',
    'prev'    : 'https://images.unsplash.com/photo-1489706920962-640fcad4b463?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=057570f4673903ff39658ee6ac17a66a&auto=format&fit=crop&w=600&q=60',
  },
  {
    'name'    : 'Location 2',
    'adress'  : '5360 Old York Road 19141',
    'location':{
      'lat' : 40.034038,
      'lon' : -75.145223
    },
    'lable'   : '30',
    'prev'    : 'https://images.unsplash.com/photo-1483519396903-1ef292f4974a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=594ae239b7e8e8ed17d447a9950adeb4&auto=format&fit=crop&w=600&q=60',
  },
  {
    'name'    : 'Location 3',
    'adress'  : '1350 W Girard Avenue 19123',
    'location':{
      'lat' : 39.9713524,
      'lon' : -75.1590360
    },
    'lable'   : '45',
    'prev'    : 'https://images.unsplash.com/photo-1520803703785-bfb8d67060b1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5101b3f0270554cf6224f12e70cb7fb9&auto=format&fit=crop&w=600&q=60',
  }
];

gmarkers = [];




function initialize() {

  var content = document.getElementById('iw');

  var lat = 39.9995601,
      lng = -75.1395161,
      latlng = new google.maps.LatLng(lat, lng);		

  var mapOptions = {           
    center: new google.maps.LatLng(lat, lng),           
    zoom: 12,           
    mapTypeId: google.maps.MapTypeId.ROADMAP         
  };

  var mapCanvas = document.getElementById('map');

  var map = new google.maps.Map(mapCanvas, mapOptions);



  for (var i = 0; i < locations.length; i++) {

    gmarkers[locations[i].name] =
      createMarker(
      new google.maps.LatLng(locations[i].location.lat, locations[i].location.lon),
      locations[i].name + "<br>" + 
      locations[i].adress, 
      locations[i].lable
    );   

    
    var infowindow = new google.maps.InfoWindow({
      maxWidth: 350
    }); 		    
  }




  function createMarker(latlng, html, lable) {
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: {
        // path: "M12 0c-5.522 0-10 4.395-10 9.815 0 5.505 4.375 9.268 10 14.185 5.625-4.917 10-8.68 10-14.185 0-5.42-4.478-9.815-10-9.815zm0 18c-4.419 0-8-3.582-8-8s3.581-8 8-8 8 3.582 8 8-3.581 8-8 8z",
        // fillColor: 'red',
        // fillOpacity: 1,
        // strokeWeight: 0,
        // scale: 1,
        url: 'data:image/svg+xml;charset=utf-8,' + 
        encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
        scaledSize: new google.maps.Size(44, 44),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(44,44),
        labelOrigin:  new google.maps.Point(22,18),
      },
      label: {
        text: lable,
        color: "#fff",
      }
    });


    marker.setOpacity(.75);

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(html);
      infowindow.open(map, marker);
    });

    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });

    return marker;
  }



}

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], 'click');
};


google.maps.event.addDomListener(window, 'load', initialize);







$('a').on('click', function(e){
  e.preventDefault();


  var $this = $(this),
      loc = $this.data('location');

  // ----- Var 2 Wit wrap initialize function
  myclick(loc);

});


$('a').hover(
  function(){
    var $this = $(this),
        loc = $this.data('location');

    gmarkers[loc].setOpacity(1.0);

    gmarkers[loc].setIcon(new google.maps.MarkerImage (
    	'data:image/svg+xml;charset=utf-8,' + 
    	        encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path fill="red" d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
           new google.maps.Size(44, 44),
           new google.maps.Point(0, 0),
           null,
           null
    ) );
  },
  function(){
    var $this = $(this),
        loc = $this.data('location');

    gmarkers[loc].setOpacity(.75);

    gmarkers[loc].setIcon(new google.maps.MarkerImage (
    	'data:image/svg+xml;charset=utf-8,' + 
    	        encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
           new google.maps.Size(44, 44),
           null,
           null,
           null	
    ) );
  }
);
#map {         
  height: 500px;         
  width: 100%;         
  margin: 0 auto;       
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>


<script src="https://maps.google.com/maps/api/js?libraries=places&region=uk&language=en"></script>


<ul>
  <li>
    <a href="#" data-location="Location 1">Location 1</a>
  </li>
  <li>
    <a href="#" data-location="Location 2">Location 2</a>
  </li>
  <li>
    <a href="#" data-location="Location 3">Location 3</a>
  </li>
</ul>


<div id="map"></div>

codepen link

我正在尝试进行颜色更改：

marker.setIcon(new google.maps.MarkerImage (
        'data:image/svg+xml;charset=utf-8,' + 
                encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path fill="blue" d="M12 0c-5.522 0-10 4.395-10 9.815 0 5.505 4.375 9.268 10 14.185 5.625-4.917 10-8.68 10-14.185 0-5.42-4.478-9.815-10-9.815zm0 18c-4.419 0-8-3.582-8-8s3.581-8 8-8 8 3.582 8 8-3.581 8-8 8z"/></svg>'),
           new google.maps.Size(44, 44),
           new google.maps.Point(0, 0),
           null,
           null
    ) );

但是由于某些原因，当悬停时，图标会移动。

如果您使用svg，则通常此代码不起作用。

问题：实现标记效果，更改标记的颜色，标记的大小以及是否将svg用于标记（更改填充标记）的代码是什么？ / p>

1 个答案:

答案 0 :(得分：2)

不是问题，但很早以前MarkerImage代替了匿名对象Icon（不再记录，但仍然可以使用）

问题是您没有以相同的方式定义普通图标和悬停图标（有些使用Icon定义，有些使用MarkerImage）。 如果我使定义一致，则图标的锚点不会更改。

function initialize() {

  var content = document.getElementById('iw');

  var lat = 39.9995601,
    lng = -75.1395161,
    latlng = new google.maps.LatLng(lat, lng);

  var mapOptions = {
    center: new google.maps.LatLng(lat, lng),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var mapCanvas = document.getElementById('map');

  var map = new google.maps.Map(mapCanvas, mapOptions);
  for (var i = 0; i < locations.length; i++) {
    gmarkers[locations[i].name] =
      createMarker(
        new google.maps.LatLng(locations[i].location.lat, locations[i].location.lon),
        locations[i].name + "<br>" +
        locations[i].adress,
        locations[i].lable
      );
    var infowindow = new google.maps.InfoWindow({
      maxWidth: 350
    });
  }
  function createMarker(latlng, html, lable) {
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: {
        url: 'data:image/svg+xml;charset=utf-8,' +
          encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
        scaledSize: new google.maps.Size(44, 44),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(44, 44),
        labelOrigin: new google.maps.Point(22, 18),
      },
      label: {
        text: lable,
        color: "#fff",
      }
    });
    marker.setOpacity(.75);
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(html);
      infowindow.open(map, marker);
    });
    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });
    return marker;
  }
}
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], 'click');
};
google.maps.event.addDomListener(window, 'load', initialize);
$('a').on('click', function(e) {
  e.preventDefault();
  var $this = $(this),
    loc = $this.data('location');
  // ----- Var 2 Wit wrap initialize function
  myclick(loc);
});
$('a').hover(
  function() {
    var $this = $(this),
      loc = $this.data('location');
    gmarkers[loc].setOpacity(1.0);
    gmarkers[loc].setIcon({
      url: 'data:image/svg+xml;charset=utf-8,' +
        encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path fill="red" d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
      scaledSize: new google.maps.Size(44, 44),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(44, 44),
      labelOrigin: new google.maps.Point(22, 18),
    })
  },
  function() {
    var $this = $(this),
      loc = $this.data('location');
    gmarkers[loc].setOpacity(.75);
    gmarkers[loc].setIcon({
      url: 'data:image/svg+xml;charset=utf-8,' +
        encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
      scaledSize: new google.maps.Size(44, 44),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(44, 44),
      labelOrigin: new google.maps.Point(22, 18),
    });
  }
);

var locations = [{
    'name': 'Location 1',
    'adress': '215 West Girard Avenue 19123',
    'location': {
      'lat': 39.9695601,
      'lon': -75.1395161
    },
    'lable': '200',
    'prev': 'https://images.unsplash.com/photo-1489706920962-640fcad4b463?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=057570f4673903ff39658ee6ac17a66a&auto=format&fit=crop&w=600&q=60',
  },
  {
    'name': 'Location 2',
    'adress': '5360 Old York Road 19141',
    'location': {
      'lat': 40.034038,
      'lon': -75.145223
    },
    'lable': '30',
    'prev': 'https://images.unsplash.com/photo-1483519396903-1ef292f4974a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=594ae239b7e8e8ed17d447a9950adeb4&auto=format&fit=crop&w=600&q=60',
  },
  {
    'name': 'Location 3',
    'adress': '1350 W Girard Avenue 19123',
    'location': {
      'lat': 39.9713524,
      'lon': -75.1590360
    },
    'lable': '45',
    'prev': 'https://images.unsplash.com/photo-1520803703785-bfb8d67060b1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5101b3f0270554cf6224f12e70cb7fb9&auto=format&fit=crop&w=600&q=60',
  }
];
gmarkers = [];
#map {
  height: 500px;
  width: 100%;
  margin: 0 auto;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>


<script src="https://maps.google.com/maps/api/js?libraries=places&region=uk&language=en"></script>


<ul>
  <li>
    <a href="#" data-location="Location 1">Location 1</a>
  </li>
  <li>
    <a href="#" data-location="Location 2">Location 2</a>
  </li>
  <li>
    <a href="#" data-location="Location 3">Location 3</a>
  </li>
</ul>


<div id="map"></div>

相关问题
最新问题