Google地图自定义标记与css圆角 [英] Google map custom marker with css rounded corner

问题描述

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

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

我想为它添加一个圆角背景如下css

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;


}

如何实现这个谷歌地图？ / p>

how achieve this for google map ?

推荐答案

自3.17版本起，google.maps.Marker对象存在于 markerLayer 窗格这只是一个花哨的名称for a div。

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

要获取对markerLayer的引用，您需要创建一个OverlayView对象。现在，这个对象有点抽象。你需要实现一个绘制函数来工作。例如，打开基本示例的a new tab and paste this to the console

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

它返回：

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

Thay markerLayer一个包含标记的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
             });

我的标记层将是：

img src =https://i.stack.imgur.com/38AgC.pngalt =enter image description here>

所选的div

如果你想以程序方式访问markerLayer，你可以在获取它的引用后添加一个markerLayer类方法。 getPanes 方法。

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 ：您可以对其进行样式设置

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

编辑：我做了一个bl.ocks让你检查

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