google-maps-api-3 - 如何在不使用阴影的情况下围绕自定义标记图标创建框架

Question

现在，如果新的 Google map “VisualRefresh”不再允许阴影，您将如何在动态加载的标记图标后面放置一个白框？ 1

开通 http://jsfiddle.net/FSffv/3/与 google.maps.visualRefresh = false;查看标记图标周围的白框和 google.maps.visualRefresh = true;让它消失。

var map;
var m_NormalImageSize = 15;
var m_NormalShadowSize = m_NormalImageSize+5;
var elevator;
var myOptions = {
  zoom: 6,
  center: new google.maps.LatLng(47, 8),
  mapTypeId: 'terrain'
};

// turn VisualRefresh on/off
google.maps.visualRefresh = false;

map = new google.maps.Map($('#map')[0], myOptions);
var img = new Image();
img.src = "http://t2.gstatic.com/images?q=tbn:ANd9GcQUnmYVY5sWfZtBlw_IELax3W8E7-jZcCXLd2HUZYtpk_AeuK4CRnJmMHj0";
var img_ratio = img.height / img.width;
if (isNaN(img_ratio)) 
  img_ratio = 1;
var icon_size = new google.maps.Size(m_NormalImageSize, m_NormalImageSize * img_ratio);
var shadow_size = new google.maps.Size(m_NormalShadowSize, m_NormalShadowSize * img_ratio);
var image = new google.maps.MarkerImage(
  "http://t2.gstatic.com/images?q=tbn:ANd9GcQUnmYVY5sWfZtBlw_IELax3W8E7-jZcCXLd2HUZYtpk_AeuK4CRnJmMHj0",
  icon_size,
  new google.maps.Point(0, 0),
  new google.maps.Point(-3, m_NormalImageSize * img_ratio + 3 * img_ratio),
  icon_size
);

// the frame around the marker icon as a shadow
var shadow = new google.maps.MarkerImage(
  "http://alsotoday.com/jpg/placemarkbackground_white.png",
  shadow_size,
  new google.maps.Point(0, 0),
  new google.maps.Point(0, m_NormalShadowSize * img_ratio),
  shadow_size
);

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(47, 8),
  map: map,
  icon: image,
  shadow: shadow,
  title: "hallo"
 });

Answer 1

一种方法是使用自定义 HTML 覆盖。然后你可以用任何你喜欢的方式来设计它。

这是一个 working example使用此代码:

function ImageMarker( options ) {
    this.setValues( options );

    this.$inner = $('<div>').css({
        position: 'relative',
        left: '-50%', top: '-50%',
        fontSize: '1px',
        lineHeight: '1px',
        border: '2px solid red',
        padding: '2px',
        backgroundColor: 'white',
        cursor: 'default'
    });

    this.$div = $('<div>')
        .append( this.$inner )
        .css({
            position: 'absolute',
            display: 'none'
        });
};

ImageMarker.prototype = new google.maps.OverlayView;

ImageMarker.prototype.onAdd = function() {
    $( this.getPanes().overlayMouseTarget ).append( this.$div );
};

ImageMarker.prototype.onRemove = function() {
    this.$div.remove();
};

ImageMarker.prototype.draw = function() {
    var marker = this;
    var projection = this.getProjection();
    var position = projection.fromLatLngToDivPixel( this.get('position') );

    this.$div.css({
        left: position.x,
        top: position.y,
        display: 'block'
    })

    this.$inner
        .html( '<img src="' + this.get('image') + '"/>' )
        .click( function( event ) {
            var events = marker.get('events');
            events && events.click( event );
        });
};

function initialize() {
    var latLng = new google.maps.LatLng( 40.708762, -74.006731 );

    var map = new google.maps.Map( $('#map_canvas')[0], {
        zoom: 15,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker = new ImageMarker({
        map: map,
        position: latLng,
        image: 'http://cdn.sstatic.net/stackoverflow/img/favicon.ico',
        events: {
            click: function( event ) {
                alert( 'Clicked marker' );
            }
        }
    });
};

$( initialize );