带有css圆角的谷歌地图自定义标记

Posted

技术标签:

【中文标题】带有css圆角的谷歌地图自定义标记【英文标题】:Google map custom marker with css rounded corner 【发布时间】:2014-10-11 14:47:52 【问题描述】:

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

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;



谷歌地图如何做到这一点?

【问题讨论】:

【参考方案1】:

试试这个 DEMO 写在 SCSS (Sass)

$radius: 10px;
$thickness: 5px;
$border-color: rgba(black, 0.15);
$background-color: white;

.wrapper 
  position: relative;
  width: 400px;
  height: 200px;
  overflow: hidden;
  margin: 50px;

  & > i 
    display: block;
    position: absolute;

    &.top 
      top: 0;
      border-top: $thickness solid $border-color;
      &:after 
        top: -$radius/2 - $thickness;
        border-top: $radius/2 solid $background-color;
      
    
    &.right 
      right: 0;
      border-right: $thickness solid $border-color;
      &:after 
        right: -$radius/2 - $thickness;
        border-right: $radius/2 solid $background-color;
      
    
    &.bottom 
      bottom: 0;
      border-bottom: $thickness solid $border-color;
      &:after 
        bottom: -$radius/2 - $thickness;
        border-bottom: $radius/2 solid $background-color;
      
    
    &.left 
      left: 0;
      border-left: $thickness solid $border-color;
      &:after 
        left: -$radius/2 - $thickness;
        border-left: $radius/2 solid $background-color;
      
    

    &.top:not(.right):not(.left),
    &.bottom:not(.right):not(.left) 
      height: $thickness;
      left: $radius+$thickness;
      right: $radius+$thickness;
    

    &.left:not(.top):not(.bottom),
    &.right:not(.top):not(.bottom) 
      width: $thickness;
      top: $radius+$thickness;
      bottom: $radius+$thickness;
    

    &.top.right,
    &.top.left,
    &.bottom.right,
    &.bottom.left 
      width: $radius;
      height: $radius;

      &:after 
        content:"";
        position: absolute;
        width: 1.5*$radius;
        height: 1.5*$radius;
      
    

    &.top.right 
      border-top-right-radius: $radius;
      &:after  border-top-right-radius: 1.5*$radius; 
    
    &.top.left 
      border-top-left-radius: $radius;
      &:after  border-top-left-radius: 1.5*$radius; 
    
    &.bottom.right 
      border-bottom-right-radius: $radius;
      &:after  border-bottom-right-radius: 1.5*$radius; 
    
    &.bottom.left 
      border-bottom-left-radius: $radius;
      &:after  border-bottom-left-radius: 1.5*$radius; 
    
  


#map 
  width: inherit;
  height: inherit;
  .gmnoprint 
    display: none;
  

【讨论】:

不,我不是在寻找地图,而是在寻找具有圆角的标记。我已经准备好了 .css,但不知道如何集成它【参考方案2】:

您好,我尝试了所有这些答案,但没有人按照我的意愿工作 先试试这个创建一个包含图像(MarkerImage)的div并添加CSS

   var map;

    function initialize() 
        var mapOptions = 
            zoom: 9,
            center: new google.maps.LatLng(40.6, -74)
        ;
      map = new google.maps.Map(document.getElementById('map-canvas'),    mapOptions);

     // I create 3 markers using http://ruralshores.com/assets/marker-icon.png as icon
     var myIcon='http://ruralshores.com/assets/marker-icon.png';
     var marker1 = new google.maps.Marker( position: lat:40.8, lng:-74, map: map, icon: myIcon, optimized:false );
     var marker2 = new google.maps.Marker( position: lat:40.6, lng:-74.5, map: map, icon: myIcon , optimized:false );
     var marker3 = new google.maps.Marker( position: lat:40.5, lng:-74.3, map: map, icon: myIcon , optimized:false );

     // I create an OverlayView, and set it to add the "markerLayer" class to the markerLayer DIV
     var myoverlay = new google.maps.OverlayView();
     myoverlay.draw = function () 
         this.getPanes().markerLayer.id='markerLayer';
     ;
     myoverlay.setMap(map);




google.maps.event.addDomListener(window, 'load', initialize);

现在添加一些 CSS

#markerLayer img 
        border: 2px solid red !important;
        width: 85% !important;
        height: 90% !important;
        border-radius: 5px;
      

完整教程是her

【讨论】:

【参考方案3】:

如上所述,我使用了OverlayView

var AvatarMarker = function(latlng,avatarUrl,map,id)
      this.latlng = latlng;
      this.avatarUrl = avatarUrl;
      this.setMap(map);
      this.id= id;
    ;
  AvatarMarker.prototype = new google.maps.OverlayView();
  AvatarMarker.prototype.onAdd= function()
    var img = document.createElement("img"),me=this;
    img.style.;
    img.style.;
    img.style.position="absolute";
    img.style.webkitBorderRadius="50%";
    img.style.borderRadius="50%";
    img.style.zIndex="999";
    img.src=me.avatarUrl;
    this.getPanes().overlayMouseTarget.appendChild(img);
    me.img= img;
    img.onclick = function()
      google.maps.event.trigger(me,"click",id:me.id);
    
  ;
  AvatarMarker.prototype.draw = function()
    this.setLatLng(this.latlng);
  
  AvatarMarker.prototype.onRemove = function()
    this.img.parentNode.removeChild(this.img);
    this.img =  null;
  
  AvatarMarker.prototype.setLatLng = function(latlng)
    if(!this.getProjection()) return ;
    var overlayProjection = this.getProjection(),
      xy=overlayProjection.fromLatLngToDivPixel(latlng);
    this.img && (this.img.style.left=(xy.x-15)+'px');
    this.img && (this.img.style.top=(xy.y-15)+'px');
    google.maps.event.trigger(this,"draw");
  
  AvatarMarker.prototype.getLatLng = function()return this.latlng;

相关文档在这里:customoverlays

【讨论】:

【参考方案4】:

当您知道用于标记的图像的 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/

【讨论】:

很好的提示!毕竟,它与任何其他属性的匹配相同:) 我应该把 img 的 css 类放在哪里,并希望它是可靠的?我没有看到设置的半径颜色在哪里? 我会有多个图标,如何设置它们,为什么要说不同的背景颜色?我对图像设置不是很清楚【参考方案5】:

从 3.17 版开始,google.maps.Marker 对象存在于 markerLayer pane 中,这只是 div 的一个花哨名称。

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

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 的那个)是 markerLayer。

如果您想以编程方式访问 markerLayer,您可以在使用 getPanes 方法获取其引用后向其添加“markerLayer”类。我猜markerLayer里面的每张图片都是一个marker,所以你可以随意设置样式。

TL/DR :您可以设置它的样式,前提是您费尽心思找到对标记的 DOM 引用。

编辑:I made a bl.ocks for you to check

【讨论】:

我有点迷失了,我想要的是让我的 .css 并在其中嵌入像这样的当前图标 我知道,但这并不容易。如果您想在 google 地图中设置元素的样式,您必须首先在文档中获取对它的引用。这只是一种解决方法,根本不是谷歌提供的地图元素样式的有限方法。 那么如何获得确切的参考,因为 div 没有任何 id 对?我正在尝试用我的样本弄清楚。有什么方法可以准确知道吗? 通过创建 OverlayView 并添加图标然后添加到地图来解决的最佳建议是什么?这会成为以后集群的问题吗? overlayview 只是抓取正确 div 的帮手。标记仍然像往常一样附加到全局地图实例。我做了一个 bl.ocks 给你检查bl.ocks.org/amenadiel/f4e5bd78b214ff081254

以上是关于带有css圆角的谷歌地图自定义标记的主要内容,如果未能解决你的问题,请参考以下文章

带有毕加索的谷歌地图集群项目标记图标

在颤动的谷歌地图的自定义标记中添加数字? [关闭]

带有标记的谷歌地图没有出现地图

如何在同一张地图上使用带有多个标记的谷歌地图 API

带有多个标记的谷歌地图自动中心

带有来自服务器的数字标记的谷歌地图