Google Maps API v3在点击标记上添加阴影 [英] Google Maps API v3 add shadow on clicked marker

问题描述

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

我通读了一些网页，例如谷歌地图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]]; 
函数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]，位置[i] [2]），
图标：'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分叉并添加到它并将链接发回到此处。

解决方案

第一次点击标记时，创建标记阴影对象（从我对您引用的问题的回答中） ，当它被点击时将它移动到新点击的标记上（向 MarkerShadow 类中添加 .setPosition 方法）。

  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'，//阴影图像的水平尺寸较大//位置和偏移量与主图像相同。 size：new google.maps.Size（37，34），origin：new google.maps.Point（0，0），anchor：new google.maps.Point（10，34）}; （位置[i] [1]，位置[i] [2] ），图标：'https://maps.gstatic.com/mapfiles/ms2/micons/purple.png'，标题：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（地图）; }} google.maps.event.addDomListener（window，'load'，initialize）; // marker shadow codeMarkerShadow.prototype = new google.maps.OverlayView（）; MarkerShadow.prototype.setPosition = function（latlng）{this.posn_ = latlng; this.draw（）; } / ** @constructor * / function MarkerShadow（position，options，map）{//初始化所有属性。 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; } //定义一个属性来保存图像的div。我们会在接收到onAdd（）//方法后真正创建这个div，所以我们暂时将它留空。 this.div_ = null; //在这个覆盖层上显式调用setMap。 this.setMap（地图）; } / ** * onAdd在地图的窗格准备就绪并且叠加层已添加到地图中时调用。 * / MarkerShadow.prototype.onAdd = function（）{//如果没有url，则返回，无事可做。如果（！this.image_）返回; var div = document.createElement（'div'）; div.style.borderStyle ='none'; div.style.borderWidth ='0px'; div.style.position ='绝对'; //创建img元素并将其附加到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 ='绝对'; div.appendChild（IMG）; this.div_ = div; //将元素添加到overlayLayer窗格。 var panes = this.getPanes（）; panes.overlayShadow.appendChild（div）;}; MarkerShadow.prototype.draw = function（）{//如果没有url，则返回，无事可做。如果（！this.image_）返回; //我们使用叠加层的坐标将其固定到正确的位置//为此，我们需要从叠加层中检索投影。 var overlayProjection = this.getProjection（）; var posn = overlayProjection.fromLatLngToDivPixel（this.posn_）; //调整图片div的大小以适应指定的尺寸。如果（！this.div_）返回; 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'; }}; //如果我们将overlay的map属性设置为'null'，onRemove（）方法将从API自动调用.MarkerShadow.prototype.onRemove = function（）{if（！this.div_）return ; this.div_.parentNode.removeChild（this.div_）; this.div_ = null;};  

< #googleMap {height：100％;宽度：100％; margin：0px; < script src =https：//

I am aware that officially google removed shadows on markers in v3 of the google maps API. With this is in mind i have a project where marker shadows are required. I would like to place a shadow on a marker when the marker is clicked. Its essentially add an event listener to a marker and when its clicked add a shadow to the marker as a way to show that the clicked marker is the active marker.

I read through some pages e.g. marker shadows in google maps v3 which put shadows on all markers but I would like to borrow on such an example and have the shadows added when a marker is clicked and have the shadows removed when the marker loses focus i.e. when another marker is clicked.

My jsfiddle with two markers to play with is here and code is below: 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);

If anyone can help with coming up with a strategy or even a code snippet to place shadows on a marker when its clicked I would be very happy. Please feel free to fork the jsfiddle and add to it and post the link back here.

解决方案

Another option, create the marker shadow object (from my answer to the question you reference) the first time a marker is clicked, move it to a newly clicked marker when that is clicked (add a .setPosition method to the MarkerShadow class).

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>

这篇关于Google Maps API v3在点击标记上添加阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！