在Google地图上放置圆角有什么技巧吗？ [英] Is there any trick to put rounded corners on a Google map?
本文介绍了在Google地图上放置圆角有什么技巧吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
可能重复：
Google地图上的透明圆角
ve尝试使用通常的样式表属性为特定的浏览器，但没有一个似乎工作。有什么窍门让这发生吗？
I've tried using the usual style sheet properties for specific browsers, but none seem to work. Is there a trick to making this happen? I know I've seen it in the wild, but can't recall where.
推荐答案
在这个线程讨论这个主题，有一个链接到此页，其中包含您要查找的内容的示例。
In this thread discussing this topic, there is a link to this page, which has an example of exactly what you're looking for.
策略似乎是用圆角图像覆盖地图。
The strategy seems to be to overlay the map with rounded corner images.
EDIT：以下是示例代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rounded Map Corners - Google Maps Javascript API v3</title>
<style>
html, body {height: 100%; margin: 0;}
#Container {position:relative;width:400px;margin:20px;}
.TopLeft, .TopRight, .BottomLeft, .BottomRight {position:absolute;z-index:1000;background-image: url(corners.png);width:20px;height:20px;}
.TopLeft {left: 0; top: 0;}
.TopRight {right: 0; top: 0; background-position: top right;}
.BottomRight {right: 0; bottom: 0; background-position: bottom right;}
.BottomLeft {left: 0; bottom: 0; background-position: bottom left;}
#map_canvas {width: 400px; height: 400px;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function Initialize() {
var MapOptions = {
zoom: 15,
center: new google.maps.LatLng(37.20084, -93.28121),
mapTypeId: google.maps.MapTypeId.ROADMAP,
sensor: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), MapOptions);
}
</script>
</head>
<body onload="Initialize()">
<div id="Container">
<div class="TopLeft"></div>
<div class="TopRight"></div>
<div id="map_canvas"></div>
<div class="BottomLeft"></div>
<div class="BottomRight"></div>
</div>
</body></html>
这篇关于在Google地图上放置圆角有什么技巧吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
