谷歌地圖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>