在谷歌地图上放置圆角有什么诀窍吗？

Question

在谷歌地图上放置圆角有什么诀窍吗？

Fas*_*ish 8 html css google-maps google-maps-api-3

可能重复:
Google地图上的透明圆角

我已经尝试使用特定浏览器的常用样式表属性,但似乎都没有.是否有诀窍才能实现这一目标？我知道我在野外看过它,但不记得在哪里.

Answer 1

gor*_*ric 10

在这个线程讨论这个话题,有一个链接这个页面,其中有正是你要寻找的一个例子.

策略似乎是用圆角图像覆盖地图.

编辑:这是示例代码.

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，8 月前
查看次数：	12886 次
最近记录：	13 年，2 月前