Question

我正在寻找一种方法让标记阴影与Google地图中的“视觉刷新”一起使用，但似乎无法实现。

我认为以下是建议的方法： https://developers.google.com/maps/tutorials/customizing/custom-markers

任何人都可以在该教程的示例中看到标记阴影吗？我不能。

你们有什么要做的呢？

提前致谢！

Answer 1

添加阴影以发布视觉刷新Google Maps Javascript API v3地图的一个选项：

创建一个Custom Overlay来保持阴影图像附加到＆＃34; overlayShadow＆＃34;窗格
为每个标记添加一个
- proof of concept

添加带阴影的标记：

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: getMarkerImage(beach[4]),
    shape: iconShape,
    title: beach[0],
    zIndex: Math.round(myLatLng.lat()*-100000)<<5
});
var shadow = new MarkerShadow(myLatLng, iconShadow, map);
marker.bindTo('map',shadow,'map');

MarkerShadow代码（根据Google自定义覆盖示例修改）：

MarkerShadow.prototype = new google.maps.OverlayView();
/** @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;
};

Answer 2

为什么不创建一个z-index较低的额外标记？

createMarkerShadow = function(map, data) {
        var latLng = new google.maps.LatLng(data.latitude, data.longitude);
        var markerShadow = new google.maps.Marker({
            clickable: false,
            position: latLng,
            map: map,
            icon:{
                url: '/frontend/img/icons/google-map-marker-shadow.svg',
                //The size image file.
                size: new google.maps.Size(225, 120),
                //The point on the image to measure the anchor from. 0, 0 is the top left.
                origin: new google.maps.Point(0, 0),
                //The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
                anchor: new google.maps.Point(115, 82)
            },
            zIndex: (Math.round(latLng.lat()*-100000)<<5)-1
        });

        return markerShadow;
    };


setMarkerShadows = function (map, locations, bound) {
    for (var i = 0; i < locations.length; i++) {
        var data = locations[i];
        var markerShadow = createMarkerShadow(map, data);

        bound.extend(markerShadow.getPosition());
    }
};

bound = new google.maps.LatLngBounds();

Google Maps v3中的标记阴影

2 个答案: