我有一个mouseenter事件状态(“开始”)。我们可以将setAnimation()更改为setSize吗?为了使我可以用鼠标输入和扩大Marker,弹跳效果并不是我想要的感觉。
function letsBounce(storeId, status) {
var i, len, marker;
// Find the correct marker to bounce based on the storeId.
for (i = 0, len = markersArray.length; i < len; i++) {
if (markersArray[i].storeId == storeId) {
marker = markersArray[i];
if (status == "start") {
marker.setAnimation(google.maps.Animation.BOUNCE);
} else {
marker.setAnimation(null);
}
}
}
}
答案 0 :(得分:3)
更改代码以在鼠标悬停在外部div上时更改图标。
var regIcon = {
url: "https://maps.google.com/mapfiles/ms/micons/blue.png",
scaledSize: new google.maps.Size(32, 32)
};
var largeIcon = {
url: "https://maps.google.com/mapfiles/ms/micons/blue.png",
scaledSize: new google.maps.Size(48, 48)
}
function selectMarker(storeId, status) {
var i, len, marker;
// Find the correct marker to change based on the storeId.
for (i = 0, len = markersArray.length; i < len; i++) {
if (markersArray[i].storeId == storeId) {
marker = markersArray[i];
if (status == "start") {
marker.setIcon(largeIcon);
} else {
marker.setIcon(regIcon);
}
}
}
}
代码段:
var regIcon = {
url: "https://maps.google.com/mapfiles/ms/micons/blue.png",
scaledSize: new google.maps.Size(32, 32)
};
var largeIcon = {
url: "https://maps.google.com/mapfiles/ms/micons/blue.png",
scaledSize: new google.maps.Size(48, 48)
}
function selectMarker(storeId, status) {
var i, len, marker;
// Find the correct marker to change based on the storeId.
for (i = 0, len = markersArray.length; i < len; i++) {
if (markersArray[i].storeId == storeId) {
marker = markersArray[i];
if (status == "start") {
marker.setIcon(largeIcon);
} else {
marker.setIcon(regIcon);
}
}
}
}
var map, bounds;
var markersArray = [];
var sidebarHtml = "";
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
bounds = new google.maps.LatLngBounds();
sidebarHtml += '<table>';
for (i = 0; i < markerData.length; i++) {
addMarker(new google.maps.LatLng(markerData[i].lat, markerData[i].lng), "marker " + i, i);
}
sidebarHtml += '</table>';
document.getElementById('sidebar').innerHTML = sidebarHtml;
}
google.maps.event.addDomListener(window, "load", initialize);
var startpos, endpos;
var waypnts = [];
var markerData = [{ //Livermore, CA, USA
lat: 37.6818745,
lng: -121.7680088
},
{ // Hayward, CA, USA
lat: 37.6688205,
lng: -122.0807964
},
{ // Fremont, CA, USA
lat: 37.5482697,
lng: -121.9885719
},
{ // Milpitas, CA 95035, USA
lat: 37.4323341,
lng: -121.8995741
},
{ // San Jose, CA, USA
lat: 37.3382082,
lng: -121.8863286
},
{ // Mountain View, CA, USA
lat: 37.3860517,
lng: -122.0838511
},
{ // Palo Alto, CA, USA
lat: 37.4418834,
lng: -122.1430195
},
{ // Redwood City, CA, USA
lat: 37.4852152,
lng: -122.2363548
},
{ // San Mateo, CA, USA
lat: 37.5629917,
lng: -122.3255254
},
{ // San Francisco, CA, USA
lat: 37.7749295,
lng: -122.4194155
},
];
function addMarker(latLng, title, index) {
var marker = new google.maps.Marker({
position: latLng,
title: title,
map: map,
icon: regIcon,
storeId: index
});
markersArray.push(marker);
sidebarHtml += '<tr id="row' + i + '"><td onmouseover="selectMarker(' + i + ',\'start\');" onmouseout="selectMarker(' + i + ',\'stop\');">marker ' + i + '</td></tr>';
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
}
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
height: 100%;
width: 70%;
margin: 0px;
padding: 0px;
float: left;
}
#sidebar {
height: 100%;
width: 30%;
float: right;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
<div id="sidebar"></div>