首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何制作Google Maps API v3六边形平铺地图,最好是基于坐标?

在制作基于Google Maps API v3的六边形平铺地图时,可以使用以下步骤:

  1. 引入Google Maps API v3库:
代码语言:html<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
复制
  1. 创建一个地图容器:
代码语言:html
复制
<div id="map" style="width: 100%; height: 100%;"></div>
  1. 初始化地图:
代码语言:javascript
复制
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 1,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });
}
  1. 创建一个六边形覆盖物:
代码语言:javascript
复制
function createHexagon(center, radius) {
  var hexagon = [];
  var latLng = new google.maps.LatLng(center.lat, center.lng);
  var vertex = [];

  for (var i = 0; i < 6; i++) {
    var angle = Math.PI / 3 * i;
    var vertexLat = center.lat + radius * Math.cos(angle);
    var vertexLng = center.lng + radius * Math.sin(angle);
    vertex.push(new google.maps.LatLng(vertexLat, vertexLng));
  }

  for (var j = 0; j < 6; j++) {
    hexagon.push(vertex[j]);
  }

  return hexagon;
}
  1. 在地图上绘制六边形:
代码语言:javascript
复制
var hexagon = createHexagon({lat: 30.5928, lng: 114.3055}, 0.1);
var polygon = new google.maps.Polygon({
  paths: hexagon,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});
polygon.setMap(map);
  1. 根据需要,可以将上述代码封装成一个类或者函数,以便在不同场景下重复使用。

通过以上步骤,可以在Google Maps API v3中创建一个基于坐标的六边形平铺地图。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Leaflet 与高德合并会擦出怎么样的火花?

其他地图 (Other Maps):如:房地产售楼的规划图,天气预报的云图,NASA 的城市灯光图等。 本文框架 本文框架 1.材料准备 画统计图最重要的啥?数据!没有数据怎么画?...(因为同一地点不同坐标系里的经纬度不一样,偏移大概有几百米,所以千万不要混用) WGS84坐标系:一般谷歌等国外地图使用; GCJ02坐标系(加密的火星坐标系):国内的高德地图和腾讯地图等使用; BD...-09 坐标系(再次加密的火星坐标系):国内的百度地图使用; 因为本教程为了适用性使用的高德的底图(GCJ02坐标系),如果您是WGS84坐标系在后续代码中删除高德的底图就好(一定会面临主权问题);如果您是...简单的自己去搜一下“坐标拾取”,然后借助百度地图等把地址转换成坐标,但是一次就只能拾取一个,并且频繁拾取还要验证码,如果地址比较多就太麻烦了。...如何处理和使用这些数据?我们会另作一期推文。 注意: 在收集的时候一定要注意主权完整,台湾省和南疆部分中国领土,南海九段线中国领海!此外,本教程不包括填色地图,所以不需要自定义地图数据。

1.7K20

Baidu与Google地图API初探

BMap APIGoogle.maps API,应该就可以满足绝大部分需求 就易用性和色彩柔和性,推荐BMap API(Baidu) 就精确性和世界地图,推荐Google.maps API...); Google google.maps则提供全球区域的地图(支持本地化语言) 3D效果: Baidu BMap目前仅提供中国几个大城市3D地图(如北、上、广和深圳) Google google.maps...Map V3 <link href="http://code.<em>google</em>.com/apis/<em>maps</em>/documentation/javascript/examples/default.css...Bing Map <em>API</em>:<em>基于</em>Virtual Earth的<em>API</em>,js接口调用,目前只有英文版(暂没找到中文版) Yahoo!...合作,<em>google</em>.<em>maps</em> <em>API</em>起初采用MapABC,后来<em>google</em>做的更好、更灵活 51Map:    国内<em>地图</em>提供商,特色服务<em>是</em>提供<em>地图</em>下载,可以实现本地桌面<em>地图</em>(类似手机上的凯立德3D<em>地图</em>

2.6K40
  • 为什么选择Mapabc

    目前网络上有众多的在线电子地图服务,诸如Mapabc、Google Maps、Yahoo Maps、Mapbar、Microsoft Virtual Earth Maps、51地图等等。...北京巴士公司使用的地图查询就是由Mapabc来提供,有了这样的合作关系,公交线路数据的更新也会非常及时,而这个目前其他地图API服务所无法企及的。 4、收费策略。...明码坐标的支持,对于自己开发一些基于坐标运算的地图应用非常有用,而同时支持字符坐标,对于坐标数据也能起到一定的保密作用。 6、实景地图的整合。...当然,Mapabc与Google MapsAPI比起来,也有一些缺点,希望在今后API的升级中,能够逐步的赶上国际级的地图服务提供商。 1、地址解析。...Technorati Tags: Map,google,mapabc,mapbar,地图 参考资料: 1、主流电子地图API比较 2、记录几个关于Google Map API的站点 3、国内地图比较

    88310

    Baidu与Google地图API初探

    功能推荐 BMap APIGoogle.maps API,应该就能够满足绝大部分需求 就易用性和色彩柔和性,推荐BMap API(Baidu) 就精确性和世界地图,推荐Google.maps API(...google.maps则提供全球区域的地图(支持本地化语言) 3D效果: Baidu BMap眼下仅提供中国几个大城市3D地图(如北、上、广和深圳) Google google.maps则支持大部分国家的车载导航...Map V3 <link href="http://code.<em>google</em>.com/apis/<em>maps</em>/documentation/javascript/examples/default.css...背后的故事 MapBar: 国内<em>地图</em>提供商,早期与百度合作,BMap <em>API</em>採用的便是MapBar,因此它们的<em>API</em>接口有些雷同(上面我已举例) MapABC:国内<em>地图</em>提供商,早期与<em>Google</em>合作,<em>google</em>.<em>maps</em>...<em>API</em>起初採用MapABC,后来<em>google</em>做的更好、更灵活 51Map: 国内<em>地图</em>提供商,特色服务<em>是</em>提供<em>地图</em>下载,能够实现本地桌面<em>地图</em>(相似手机上的凯立德3D<em>地图</em>) 整体感觉,各家Map <em>API</em>

    1.7K20

    google maps api_js调用谷歌浏览器接口

    就用 maps.google.com 2.file=api 这个请求API 的JS 文件用的,固定的格式。...3.hl=zh-CN 这个在设定地图上除了地图图片以外的诸如控件名称、版权声明、使用提示等所需要显示文本的语言版本时候用的,假如没有指定这个参数就使用 API 的默认值,对itu.google.com...注:目前谷歌地图 API的主版本号2,当API升级时旧版本只能继续使用一个月,所以要及时更改主版本号,版本号改变会在Google Code和Maps API讨论组发布相关信息 5.key=abcdefg...五:浏览器兼容性 Google Maps API支持的浏览器种类与Google地图网站相同。...http://maps.google.com/maps?file=api&v=2里面的脚本似乎可以在任何浏览器里面解析而不产生错误,所以您可以在检查浏览器兼容性之前就包含脚本文件。

    5.6K10

    手把手教你使用QGIS制作地图

    今天我们聊聊如何使用QGIS进行地图制作并输出。对任意一幅地图制作下面介绍的步骤并不是都要用得到,我会分知识点进行介绍,学习一些常用地图制作技巧。 下面我们一步一步进行吧!...此外,这里附上谷歌地图服务的地址,方便有需要的朋友使用: Google Maps: https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z} Google Satellite...: http://www.google.cn/maps/vt?...添加晕线 地图制作中有时候需要给行政边界添加晕线,制作方法很简单。思路这样的:首先,给原始行政区做缓冲区,然后添加缓冲区到原始行政区图层下面,设置缓冲区的边线的颜色粗细。...我这里想说的在QGIS地图制作过程中如果添加了地图服务(Web-Service-Based Map),则有可能在输出保存的时候,底图的显示不太对(会有缩放),我们的矢量地图不存在问题。

    7.7K30

    谷歌地图地理解析

    受当地法律限制及各方面原因,国内很多地图并不包含地理解析和反解析功能(地理解析和反解析功能功能不够强悍),Google永远最棒的。...废话不多说要使用到Google map 地理解析和反解析功能,我们需要了解google.maps.Geocoder类,谷歌地图给我们提供了强大的api,下面我们来实现 1.初始化地图(最基本的,不解释)...//初始化地图 var map = new google.maps.Map(document.getElementById("map_canvas"),{ center : new google.maps.LatLng...进行解析后返回的状态,包含5种: ERROR(谷歌地图服务可能出错) INVALID_REQUEST(GeocoderRequest无效,即输入的请求是错误的,可能没有选择,或者属性写错) OK(解析完成...DOCTYPE html> <script src="http://<em>maps</em>.<em>google</em>.com/<em>maps</em>/<em>api</em>/js?

    1.4K30

    求论文:A Conceptual Consideration of the Free Energy Principle in

    A Conceptual Consideration of the Free Energy Principle in Cognitive Maps: How Cognitive Maps Help Reduce...事实上,最近的研究已经描述了神经网络响应中的六边形网格坐标架构的特征,该架构对与由地标和边界定义的给定空间环境相关的物理位置进行编码。...给定的网格单元不仅选择性地发射到特定的空间位置,这些位置形成了应用于直接空间的六边形瓷砖的假想网格的顶点(即,顶点描绘60°角),因此建议一种基于六边形网格的大脑中的空间坐标表示。...神经网络功能组织中空间环境的地形坐标表示与类似地图的异中心导航行为的存在与大脑中操作中的某种形式的推理预测一致,至少对于空间处理而言。...通过这项练习,我们的目的揭示贝叶斯认知图理论作为大脑和认知功能和结构的解释的普遍性,可用于理解自组织系统如何协商不同的信息领域。

    9510

    【原创】从地图到线路规划 (七)

    地图领域还有图吧、腾讯等其他产品。基于历史、市场、技术的沉淀,百度和高德在用户数上保持领先,至于图吧和腾讯地图,用户数相对要少,没有可比性。...api定位在移动端显示定位失败,我们可以尝试采用百度地图获取经纬度,然后回传给高德api转化坐标。...国际地图供应商使用的坐标系,Google和高德地图定位的的经纬度(国外)都是基于WGS-84坐标系的;但是在国内不允许直接用WGS84坐标系标注的,必须经过加密后才能使用; 2.GCJ 02坐标系,...高德和Google在国内都是使用GCJ-02坐标系,可以说,GCJ-02国内最广泛使用的坐标系; 3.百度坐标系:BD 09,百度坐标在GCJ-02坐标系的基础上再次加密偏移后形成的坐标系,只适用于百度地图.../maps.htm

    68020

    R语言地理可视化:中国国内航线航班信息统计、绘制分布夜景图

    为了更好地帮助客户进行航运业务、航线设计、港口定位等决策研究,我们使用基于R语言地理信息系统的中国航线分布可视化。...(geosphere) library(plyr) 获取地图数据来源 航线、机场坐标 机场: airports.dat 航线: routes.dat 板块地图、都市地图 世界地图: ne_10m_admin...shapefile文件转化为R可以识别的格式,然后建立数据与地图坐标间的关联。...这一步地图进行坐标变换,设置中国为世界中心,这里做了简单的坐标加减运算。...center <- 115 # 航线坐标计算中心距离 gcircles$long.reenter <- ielse(gcicles$long < center - 由于地图图形数据,若是简单移动,

    65900

    只会Excel怎么够?这49款数据可视化神器推荐收藏

    Google Chart APIGoogle Chart提供了一种非常完美的方式来可视化数据,提供了大量现成的图标类型,从简单的线图表到复杂的分层树地图等。它还内置了动画和用户交互控制。...❖ Kartograph:Kartograph不需要任何地图提供者像Google Maps,用来建立互动式地图,由两个libraries组成,从空间数据开放格式,利用向量投影的Python library...❖ Modest Maps:Modest Maps一个很小的地图库,在一些扩展库的配合下,例如Wax、Modest Maps立刻会变成一个强大的地图工具。...❖ Modest Maps:Modest Maps一个轻量级、可扩展的、可定制的和免费的地图显示类库,这个类库能帮助开发人员在他们自己的项目里与地图进行交互。...❖ Choosel:Choosel可扩展的模块化Google网络工具框架,可用来创建基于网络的整合了数据工作台和信息图表的可视化平台。

    3.7K110

    黑白、彩色线稿地图装饰画中线条轮廓底图获取方法

    这时,我们可以尝试自己获取相关地图素材,DIY一份属于自己的定制地图。   而自己制作这样一份定制装饰地图最大的问题就是——如何方便地获取地图中的道路、建筑、水体等线条呢?...在OSM中选定绘图区域后,有两种获取地图素材的方式:一直接通过网页截图,二下载OSM数据后在GSI软件中进行更进一步的处理后成图。...此外,如果有一定ArcMap等GIS软件的使用基础,大家可以基于上述第二种方式——首先下载.shp格式的OSM数据,随后在GIS软件中进行更加丰富的地图要素可视化设计。...2 Google Maps APIs 网址:https://mapstyle.withgoogle.com/ Google Maps APIs谷歌地球的一个应用程序接口,主要是面向开发者,用以在自己开发的...Google Maps APIs中可以非常方便地对地图可视化选项进行细致修改,包括地图要素的颜色、宽度等。

    1.7K30

    如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

    您可以按照教程如何在Ubuntu 18.04上快速安装Git来安装和设置Git。 第1步 - 获取Google API密钥 在本教程中,您将使用JavaScript创建Google Maps的界面。...第5步 - 添加Google地图控件 当地图通过Google Maps JavaScript API显示在网站上时,它们包含用户界面功能,允许访问者与他们看到的地图进行互动。这些功能称为控件。...让我们继续进行这些更改,并仔细研究这些地图代码如何生成的。...第8步 - 启用对Google Maps API的调用 此应用程序依赖于Google Maps API将物理地址转换为适当的纬度和经度坐标。...因此,如果应用程序无法与Google Maps API通信以生成位置的纬度和经度,则生成地图代码的任何尝试都将失败。

    13.2K20

    50款大数据分析神器 :你还在用Excel

    Google Chart APIGoogle Chart提供了一种非常完美的方式来可视化数据,提供了大量现成的图标类型,从简单的线图表到复杂的分层树地图等。它还内置了动画和用户交互控制。...❖ Kartograph:Kartograph不需要任何地图提供者像Google Maps,用来建立互动式地图,由两个libraries组成,从空间数据开放格式,利用向量投影的Python library...❖ Modest Maps:Modest Maps一个很小的地图库,在一些扩展库的配合下,例如Wax、Modest Maps立刻会变成一个强大的地图工具。...❖ Modest Maps:Modest Maps一个轻量级、可扩展的、可定制的和免费的地图显示类库,这个类库能帮助开发人员在他们自己的项目里与地图进行交互。...❖ Choosel:Choosel可扩展的模块化Google网络工具框架,可用来创建基于网络的整合了数据工作台和信息图表的可视化平台。

    1.8K10

    Kaggle | 使用Python和R绘制数据地图的十七个经典案例(附资源)

    在大多数情况下,你不能做诸如从我们的环境中调用API的事情。 Python 地图 对于Python用户来说, matplotlib底图工具包绘制2D地图一个好的起始。...有关演示如何使用Python中的底图来生成有效的地图可视化的更多示例,请查看以下这些用户内核: 美国宽带手机接入的地图可视化(Jesse Lieman-Sifry制作)。.../python/lines-on-maps/ 小倍数映射 https://plot.ly/python/map-subplots-and-small-multiples/ 因为包括数据在内的代码最好的学习方式...只是因为你有坐标数据并不意味着它属于传统的世界地图。...你可以将你在这里学到的很多内容,包括地图制作、互动和动画,转移到足球场甚至星际上。我会给你留下这些几个奖金的绘制坐标数据地图的例子: 利用martijn探索事件数据(R)。

    5.1K51

    50款大数据分析工具

    Google Chart APIGoogle Chart提供了一种非常完美的方式来可视化数据,提供了大量现成的图标类型,从简单的线图表到复杂的分层树地图等。它还内置了动画和用户交互控制。...❖ Kartograph:Kartograph不需要任何地图提供者像Google Maps,用来建立互动式地图,由两个libraries组成,从空间数据开放格式,利用向量投影的Python library...❖ Modest Maps:Modest Maps一个很小的地图库,在一些扩展库的配合下,例如Wax、Modest Maps立刻会变成一个强大的地图工具。...❖ Modest Maps:Modest Maps一个轻量级、可扩展的、可定制的和免费的地图显示类库,这个类库能帮助开发人员在他们自己的项目里与地图进行交互。...❖ Choosel:Choosel可扩展的模块化Google网络工具框架,可用来创建基于网络的整合了数据工作台和信息图表的可视化平台。

    3.5K20
    领券