带有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圆角的谷歌地图自定义标记的主要内容,如果未能解决你的问题,请参考以下文章