Question

嘿伙计我是使用谷歌地图创建地图的新手，我创建了一个简单的地图演示 HERE ，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();

现在我如何制作如下的圆形地图：

Answer 1

将border-radius：50％添加到带有canvas_map类的元素

Answer 2

border-radius: 50% .canvas_map的作品

 .canvas_map {
   border-radius: 50%;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
 }

看看这里。它工作正常：Fiddle

Answer 3

试试这个css

.hox-map {
height: 400px;
width: 400px;
border: solid 2px red;
border-radius: 200px;
z-index: 1;}

如果有效，您可以更改尺寸。

Answer 4

.hox-map {
   height: 400px;
   width: 400px;
   overflow: hidden;
   border-radius: 50%;
}

应该做的伎俩

Answer 5

这是您还可以制作谷歌地图的另一种方式：

＆＃13;

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map" style="width:1300px;height:500px;background:yellow"></div>

<script>
function myMap() {
    var mapOptions = {
        center: new google.maps.LatLng(44.7631, -85.6206),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

</body>
</html>

＆＃13;

如何制作圆形地图？使用谷歌地图

5 个答案: