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

现在，新的谷歌地图“VisualRefresh”不再允许阴影，你如何在动态加载的标记图标后面放置一个白色框架

使用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"
 });

---

一种方法是使用自定义HTML覆盖。然后你可以随心所欲地设计它

下面是一个使用此代码的示例：

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 );

功能图像标记（选项）{
此选项。设置值（选项）；
此.$inner=$（''）.css({
位置：'相对'，
左：“-50%”，上：“-50%”，
fontSize:'1px'，
线宽：“1px”，
边框：“2px纯红”，
填充：“2px”，
背景颜色：“白色”，
光标：“默认值”
});
此.$div=$（''）
.append（此.$inner）
.css({
位置：'绝对'，
显示：“无”
});
};
ImageMarker.prototype=new google.maps.overlyview；
ImageMarker.prototype.onAdd=函数（）{
$（this.getPanes（）.overlyMouseTarget）.append（this.getPanes（）.overlyMouseTarget）；
};
ImageMarker.prototype.onRemove=函数（）{
此.$div.remove（）；
};
ImageMarker.prototype.draw=函数（）{
var标记=这个；
var projection=this.getProjection（）；
var position=projection.fromlantnodivpix（this.get（'position'）；
这是$div.css({
左：位置.x，
顶部：位置y，
显示：“块”
})
这是内线
.html（“”）
。单击（功能（事件）{
var events=marker.get（'events'）；
事件&事件。单击（事件）；
});
};
函数初始化（）{
var latLng=新的google.maps.latLng（40.708762，-74.006731）；
var map=new google.maps.map（$（'#map_canvas'）[0]{
缩放：15，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var marker=新的ImageMarker({
地图：地图，
位置：latLng，
图像：'http://cdn.sstatic.net/stackoverflow/img/favicon.ico',
活动：{
单击：功能（事件）{
警报（‘点击标记’）；
}
}
});
};
$（初始化）；

再有一张带边框的图片，并做出如下声明：

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);
}

---

勾选此项。

如果图标总是有白色边框，则只需在边框已就位的情况下准备艺术品即可。如果图标是动态生成的，那么服务器端实用程序可用于添加边框。那么图标的artowrk来自何处？感谢您提供有关通过PHP将图像与框架合并的提示。但是图像周围的框架只是页面的样式，不应该改变页面的内容（图像）。例如，当我想在地图上显示实时推文时，图标（配置文件图片）会从推文中动态加载，推文每隔一秒左右就会更改。这是很酷的高级google.maps.OverlayView（）内容，但是我可以用它按Lat/Long定位多个标记吗？是的，它有

var marker=new ImageMarker（{…}）

您可以以相同的方式创建任意数量的标记，为每个标记传递不同的

位置

和

图像

。我将在我的网站上试用。谢谢此方法为自定义标记图标提供了很好的样式设置选项。问题仍然是，50-100个标记的性能如何。这是一个好问题！我真的不知道有那么多马克笔会怎么样。我很想知道结果如何。另一种方法是使用

画布

覆盖并自己绘制标记。这将很容易处理数百个标记。但是让我们先看看这个版本是怎么做的。（见我在问题下的评论）@AlexanderRoehnisch我知道你已经得到了答案。但我想展示我为你所做的一切。知道了。实际上，我正在尝试使用blend.js来合并图像。但我没有成功，因此向你展示了我的想法。@AlexanderRoehnisch事实上，从你发布问题时起，我就在试图找到一种优化的方法，同时也在等待有人给出一个很好的优化解决方案。一旦迈克尔·盖里发布了他的答案，我就发布了我的想法：）太好了！这绝对是一个“我为什么没想到那个？”的时刻。：-）@AlexanderRoehnisch-当然也可以尝试这种方法-如果它对你的应用程序有效，请随意将其作为可接受的答案，而不是我的答案。@MichaelGeary感谢你分享你对我工作的评论。