如何制作圆图？使用谷歌地图
如何制作圆图？使用谷歌地图
提问于 2016-03-02 09:00:59
嘿，伙计们，我刚开始用谷歌地图创建地图，我创建了一个简单的地图演示这里，下面的HTML代码如下：
HTML：
<section class="hox-map" id="hox-map">
</section>CSS：
.hox-map {
height: 400px;
}
body {
padding: 0;
margin: 0;
}我使用了mplace.js插件，JS代码如下所示：
marker = new Maplace({
locations: [{
lat: '25.217665',
lon: '55.2610000',
zoom: 18,
animation: google.maps.Animation.DROP
}],
controls_on_map: false,
map_div: '#hox-map',
map_options: {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
},
styles: {
'Night': [{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#e2e2e2"
}, {
"lightness": 20
}]
}]
},
generate_controls: false,
controls_on_map: false,
listeners: {
click: function(map, event) {
// console.log('fired');
// map.setOptions({scrollwheel: true});
}
}
}).Load();现在我该如何制作一张圆形地图，如下所示：
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-03-02 09:08:50
添加边框半径: canvas_map类元素的50%
Stack Overflow用户
发布于 2016-03-02 09:20:30
border-radius: 50% for .canvas_map works
.canvas_map {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}看看这里。它运行良好：小提琴
Stack Overflow用户
发布于 2016-03-02 09:21:02
尝试使用这个css
.hox-map {
height: 400px;
width: 400px;
border: solid 2px red;
border-radius: 200px;
z-index: 1;}如果它有效，你可以改变尺寸。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35742553
复制相关文章
相似问题
腾讯云开发者
