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

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

现在我该怎样做圆图如下图所示：

？

来源

2016-03-02 Alexander Solonik

加边界半径：50％至元素与类canvas_map

来源

2016-03-02 09:08:50

-1

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

应该做的伎俩

来源

2016-03-02 09:13:05 Covik

但这并没有这样的伎俩！ –

你可以在'.hox-map'上添加父元素，然后在其上应用这些样式？ – Covik

border-radius: 50%为.canvas_map工作

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

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

来源

2016-03-02 09:20:30 alexP

尝试这个CSS

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

如果一切正常，你可以改变的尺寸。

来源

2016-03-02 09:21:02

-1

这是另一种方式，你也可以做一个谷歌地图：

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

来源

2016-12-02 17:25:34 Zapper416

问题是关于制作一个圆形地图，而不是制作一个新的谷歌地图 –

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

回答

相关问题