Как создать рамку вокруг пользовательских значков маркеров без использования теней

Question

Как бы вы поместили белую рамку за динамически загруженный значок маркера, теперь, что новый «Визуальный риф» Google Maps больше не позволяет тени? 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.