谷歌地图API v3在点击标记上添加阴影

Question

我知道谷歌地图API的v3中的标记官方谷歌已经移除了阴影。考虑到这一点，我有一个需要标记阴影的项目。点击标记时，我想在标记上放一个阴影。它本质上是将一个事件监听器添加到一个标记中，并在其点击时为该标记添加一个阴影，以此来显示被点击的标记是活动标记。

我读了一些页面，例如marker shadows in google maps v3它将阴影放在所有标记上，但我想借用这样一个示例，并在单击标记时添加阴影，并在标记失去焦点时删除阴影，即单击另一个标记时。

我有两个标记一起玩的jsfiddle是在这里，代码如下：jsfiddle is here

var marker; 
var locations = [["6","43.683","9.58","3002: Location 1",1],["7","45.149","9.44","3003: Location",2]]; 
function initialize() { 
    var mapProp = { 
    center: new google.maps.LatLng(43.683, 9.44), 
    zoom: 5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP}; 

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
     for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position:new google.maps.LatLng(locations[i][1], locations[i][2]), 
     icon:'https://maps.gstatic.com/mapfiles/ms2/micons/purple.png', 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      alert(locations[i][3] + " was clicked"); 
     } 
    })(marker, i)); 

    marker.setMap(map); 
    } 
} 

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

如果任何人都可以想出一种策略，甚至一段代码，把阴影的标记时，帮助其点击我会很高兴。请随意将jsfiddle分叉并添加到它并将链接发回到此处。

Answer 1

另一种选择是，在第一次单击标记时将其创建为标记阴影对象（从我对所引用问题的回答中），将其移动到单击标记时单击该标记（将.setPosition方法添加到MarkerShadow类）。

var marker; 
 
var locations = [ 
 
    ["6", "43.683", "9.58", "3002: Location 1", 1, true], 
 
    ["7", "45.149", "9.44", "3003: Location", 2, false] 
 
]; 
 
var markerShadow; 
 
var infowindow = new google.maps.InfoWindow(); 
 

 
function initialize() { 
 
    var mapProp = { 
 
    center: new google.maps.LatLng(43.683, 9.44), 
 
    zoom: 5, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
    var iconShadow = { 
 
    url: 'http://www.geocodezip.com/mapIcons/marker_shadow.png', 
 
    // The shadow image is larger in the horizontal dimension 
 
    // while the position and offset are the same as for the main image. 
 
    size: new google.maps.Size(37, 34), 
 
    origin: new google.maps.Point(0, 0), 
 
    anchor: new google.maps.Point(10, 34) 
 
    }; 
 

 

 
    for (i = 0; i < locations.length; i++) { 
 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/purple.png', 
 
     title: locations[i][3] 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     if (markerShadow && markerShadow.setPosition) { 
 
      markerShadow.setPosition(this.getPosition()); 
 
     } else if (!markerShadow) { 
 
      markerShadow = new MarkerShadow(marker.getPosition(), iconShadow, map); 
 
     } 
 
     } 
 
    })(marker, i)); 
 

 
    marker.setMap(map); 
 
    } 
 
} 
 

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

 
// marker shadow code 
 
MarkerShadow.prototype = new google.maps.OverlayView(); 
 
MarkerShadow.prototype.setPosition = function(latlng) { 
 
    this.posn_ = latlng; 
 
    this.draw(); 
 
    } 
 
    /** @constructor */ 
 

 
function MarkerShadow(position, options, map) { 
 

 
    // Initialize all properties. 
 
    this.posn_ = position; 
 
    this.map_ = map; 
 
    if (typeof(options) == "string") { 
 
     this.image = options; 
 
    } else { 
 
     this.options_ = options; 
 
     if (!!options.size) this.size_ = options.size; 
 
     if (!!options.url) this.image_ = options.url; 
 
    } 
 

 
    // Define a property to hold the image's div. We'll 
 
    // actually create this div upon receipt of the onAdd() 
 
    // method so we'll leave it null for now. 
 
    this.div_ = null; 
 

 
    // Explicitly call setMap on this overlay. 
 
    this.setMap(map); 
 
    } 
 
    /** 
 
    * onAdd is called when the map's panes are ready and the overlay has been 
 
    * added to the map. 
 
    */ 
 
MarkerShadow.prototype.onAdd = function() { 
 
    // if no url, return, nothing to do. 
 
    if (!this.image_) return; 
 
    var div = document.createElement('div'); 
 
    div.style.borderStyle = 'none'; 
 
    div.style.borderWidth = '0px'; 
 
    div.style.position = 'absolute'; 
 

 
    // Create the img element and attach it to the div. 
 
    var img = document.createElement('img'); 
 
    img.src = this.image_; 
 
    img.style.width = this.options_.size.x + 'px'; 
 
    img.style.height = this.options_.size.y + 'px'; 
 
    img.style.position = 'absolute'; 
 
    div.appendChild(img); 
 

 
    this.div_ = div; 
 

 
    // Add the element to the "overlayLayer" pane. 
 
    var panes = this.getPanes(); 
 
    panes.overlayShadow.appendChild(div); 
 
}; 
 

 
MarkerShadow.prototype.draw = function() { 
 
    // if no url, return, nothing to do. 
 
    if (!this.image_) return; 
 
    // We use the coordinates of the overlay to peg it to the correct position 
 
    // To do this, we need to retrieve the projection from the overlay. 
 
    var overlayProjection = this.getProjection(); 
 

 
    var posn = overlayProjection.fromLatLngToDivPixel(this.posn_); 
 

 
    // Resize the image's div to fit the indicated dimensions. 
 
    if (!this.div_) return; 
 
    var div = this.div_; 
 
    if (!!this.options_.anchor) { 
 
    div.style.left = Math.floor(posn.x - this.options_.anchor.x) + 'px'; 
 
    div.style.top = Math.floor(posn.y - this.options_.anchor.y) + 'px'; 
 
    } 
 
    if (!!this.options_.size) { 
 
    div.style.width = this.size_.x + 'px'; 
 
    div.style.height = this.size_.y + 'px'; 
 
    } 
 
}; 
 

 
// The onRemove() method will be called automatically from the API if 
 
// we ever set the overlay's map property to 'null'. 
 
MarkerShadow.prototype.onRemove = function() { 
 
    if (!this.div_) return; 
 
    this.div_.parentNode.removeChild(this.div_); 
 
    this.div_ = null; 
 
};

html, 
 
body, 
 
#googleMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="googleMap"></div>