帶有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 版本開始， google.maps.Marker 對象存在於markerLayer窗格中，這只是 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
             });

我的標記層將是：

其中選定的 div（z-index 為 103 的那個）是標記層。

如果您想以編程方式訪問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/

Answer 3

你好，我嘗試了所有這些答案，但沒有人工作，因為我想先試試這個 創建一個包含圖像（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;
      }

完整教程是她

Answer 4

如上所述，我使用了 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.width="30px";
    img.style.height="30px";
    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

Answer 5

試試這個用 SCSS ( Sass ) 編寫的DEMO

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