谷歌地图自定义标记与css圆角

Question

我已设法在谷歌地图上使用并应用我自己的标记,如下所示.

var marker = new google.maps.Marker({
                            position: point,
                            map: map,                          
                            icon: pIcon,
                            optimized:false
                        });

我想添加一个圆角背景,如下面的CSS

#orangeIcon {
  width: 50px;
  height: 50px;

  overflow: hidden;
    border-top-left-radius:5px 5px;
    border-top-right-radius:5px 5px;
    border-bottom-left-radius:5px 5px;
    border-bottom-right-radius:5px 5px;
    -moz-box-shadow: 0 1px 3px #FFBF00;
    -webkit-box-shadow: 0 1px 3px #FFBF00;

    background-color: #FFBF00;
    position: relative;
    border: 5px solid #FFBF00;


}

如何实现这个谷歌地图？

Answer 1

从版本3.17开始,markerLayer窗格 中存在google.maps.Marker对象,这只是div的一个奇特名称.

要获取对markerLayer的引用,您需要创建一个OverlayView对象.现在,这个对象有点抽象.您需要实现绘图功能才能工作.例如,在新选项卡中打开基本示例并将其粘贴到控制台

var overlay = new google.maps.OverlayView();
overlay.draw=function() {};

overlay.setMap(map);

overlay.getPanes();

它返回:

{
    floatPane: div
    floatShadow: div
    mapPane: div
    markerLayer: div
    overlayImage: div
    overlayLayer: div
    overlayMouseTarget: div
    overlayShadow: div
}

Thay markerLayer是一个包含标记的div.如果我使用给定的图标图像创建标记,

var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,                          
                icon: 'http://ruralshores.com/assets/marker-icon.png',
                optimized:false
             });

我的markerLayer将是:

所选div(具有z-index 103的div)是markerLayer.

如果要以编程方式访问markerLayer,可以在使用该getPanes方法获取其后添加"markerLayer"类.我想markerLayer中的每个图像都是一个标记,所以你可以随意设置它.

TL/DR:你可以设置它的样式,只要你经历了找到你的标记的DOM引用的所有麻烦.

编辑:我做了一个bl.ocks供你检查

Answer 2

当您知道用于标记的图像的URL时,您知道如何通过CSS访问它:使用属性选择器.

让我们根据你的头像创建一个圆圈标记 1px黑色边框:

标记设置:

icon:{
       url: 'https://www.gravatar.com/avatar/0a9745ea7ac5c90d7acadb02ab1020cd?s=32&d=identicon&r=PG&f=1',
       //the size of the image is 32x32, 
       //when you want to add a border you must add 2*borderWidth to the size
       size:new google.maps.Size(34,34)},
       //define the shape
       shape:{coords:[17,17,18],type:'circle'},
       //set optimized to false otherwise the marker  will be rendered via canvas 
       //and is not accessible via CSS
       optimized:false
     }

CSS:

  img[src="https://www.gravatar.com/avatar/0a9745ea7ac5c90d7acadb02ab1020cd?s=32&d=identicon&r=PG&f=1"]{
    border-radius:16px;
    border:1px solid #000 !important;
  }

....完成.

演示:http://jsfiddle.net/doktormolle/5raf237u/

使用阴影时使用较大的尺寸(取决于阴影的大小):

http://jsfiddle.net/doktormolle/L2o2xwj3/