带有css圆角的谷歌地图自定义标记 [英] Google map custom marker with css rounded corner

问题描述

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

var 标记 = new google.maps.Marker({位置:点，地图:地图，图标:pIcon，优化:假});

我想给它添加一个圆角背景，就像下面的css

#orangeIcon {宽度:50px；高度:50px；溢出:隐藏；边框左上角半径:5px 5px;边框右上角半径:5px 5px;边框左下角半径:5px 5px;边框右下角半径:5px 5px;-moz-box-shadow: 0 1px 3px #FFBF00;-webkit-box-shadow: 0 1px 3px #FFBF00;背景颜色:#FFBF00；位置:相对；边框:5px 实心 #FFBF00；}

如何为谷歌地图实现这一目标?

解决方案

从 3.17 版开始，google.maps.Marker 对象存在于

I have managed to use and apply my own marker on google map as below.

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

I would like to add a round corner background to it like below 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;


}

how achieve this for google map ?

解决方案

As of version 3.17, the google.maps.Marker objects exists in the markerLayer pane which is just a fancy name for a div.

To get a reference to the markerLayer you need to create an OverlayView Object. Now, this object is a bit abstract. You need to implement a draw function for it to work. For example, open the basic example in a new tab and paste this to the console

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

overlay.setMap(map);

overlay.getPanes();

it returns:

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

Thay markerLayer is a div which contains the markers. If I create your marker using a given icon image,

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

My markerLayer will be:

Where the selected div (the one with z-index 103) is the markerLayer.

If you wanted to access the markerLayer programatically, you could add a "markerLayer" class to it after getting its reference with the getPanes method. I guess that every image inside the markerLayer is a marker, so you could style it at will.

TL/DR : you can style it, provided you went through all the trouble of finding the DOM reference to your marker.

Edit: I made a bl.ocks for you to check

这篇关于带有css圆角的谷歌地图自定义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！