javascript - Google Map Api 悬停标记放大图标

Question

我有一个 mouseenter 事件状态(“开始”)。我们可以将 setAnimation() 更改为 setSize 之类的吗？这样我就可以用鼠标输入并放大我的标记，弹跳效果并不是我想要的感觉。

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

Answer 1

更改代码以更改鼠标位于外部 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);
      }
    }
  }
}

proof of concept fiddle

代码片段:

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
<div id="sidebar"></div>