如何在不使用陰影的情況下在自定義標記圖標周圍創建框架

Question

現在，如何將白色框架放置在動態加載的標記圖標後面，即新的Google Maps「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); 

Answer 2

如何具有邊界上的一個更形象，作出聲明如下圖所示：

if (google.maps.visualRefresh) { 
    image = new google.maps.MarkerImage(
     "http://s24.postimg.org/lfamj2ktd/image.png", 
    icon_size, 
    new google.maps.Point(0, 0), 
    new google.maps.Point(-3, m_NormalImageSize * img_ratio + 3 * img_ratio), 
    icon_size); 
} 

檢查這個JSFiddle。