小贝子编程

谷歌地图标记悬停效果



我有一些带有标记的谷歌地图：

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>

代码笔链接

我正在尝试实现颜色更改：

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 用于标记(更改填充标记(的代码是什么？

不是问题，但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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium