谷歌地图 API 开发之新建地图

Winer 发布于2019-08-22 10:34 / 2236人阅读

摘要：最近项目用到谷歌地图，但是看谷歌文档，对于国人来说，还是比较吃力的，网上找资料也并没有太多的资料，所以就想分享给大家。显示了整个地球地图的完全缩放。

最近项目用到谷歌地图，但是看谷歌api文档，对于国人来说，还是比较吃力的，网上找资料也并没有太多的资料，所以就想分享给大家。但是因为本人太懒了，每次研究技术完事时间一久就忘了，更别提分享了，在朋友的鼓励支持之下，重新开始写博客，共享给大家，如果有不到位或者错误的地方还希望大家多多指教。毕竟交流才会进步(^o^)/~

好了，废话不多说开始正题。

谷歌地图官网：https://developers.google.com...
入门指南：https://developers.google.com...

好了，下面就贴一段简单的案例代码，入门指南里的

引入的js里需要一个秘钥，现在引用的这个是可用的，如果想自己创建一个可以去官网里自己申请创建。

下面说下Google 地图创建注意点：

1. 必须是用声明以 HTML5 形式声明应用。

大多数浏览器使用 "标准模式" 的 HTML5 文档渲染页面，这就意味着你的应用是兼容各大浏览器的。

另外，如果没有DOCTYPE标签，浏览器则使用混杂模式 (quirks mode)进行渲染页面内容。提示：应该注意的是一些"混杂模式"中的CSS并不能使用与标准模式中。在具体的应用中，所有基于百分比的大小都必须从父块元素继承。如果在父模块中没有指定大小，默认值为 0 x 0 像素。如果你想使用百分比，可以在

请输入代码这个样式声明表明地图模块的（GoogleMap）应 HTML高度为100%。

2. 添加 Google 地图 API Key

将google生成的 API key 放置于 key 参数中(key=YOUR_API_KEY)。 The sensor 参数是必须的，该参数用于指明应用程序是否使用一个传感器 (类似 GPS 导航) 来定位用户的位置。参数值可以设置为 true 或者 false。

3. 地图 DOM 元素

要想在网页上显示地图，我们必须为其预留一个位置。我们通常的实现方式是：创建一个命名的 div 元素，然后在浏览器的文档对象模型 (DOM) 中获取对该元素的引用。

4. 创建一个 Map 对象

map = new google.maps.Map(document.getElementById("map"), {...});

表示地图的 JavaScript 类是 Map 类。该类的对象定义页面上的单个地图。（您可以创建该类的多个实例–每个对象都将定义页面上的一个不同地图。）我们利用 JavaScript new 运算符来新建该类的实例。

当您新建地图实例时，您需要在页面中以地图容器形式指定一个

HTML 元素。HTML 节点是 JavaScript document 对象的子项，我们通过 document.getElementById() 方法获取对该元素的引用。

5. 定义地图属性

每个地图都有两个必需选项：center 和 zoom。还可以加上MapTypeId

map = new google.maps.Map(document.getElementById("map"), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

center（中心点）：中心属性指定了地图的中心，该中心通过坐标（纬度，经度）在地图上创建一个中心点。

Zoom（缩放级数）：zoom 属性指定了地图的缩放级数。zoom: 0 显示了整个地球地图的完全缩放。

MapTypeId（地图的初始类型）：mapTypeId 属性指定了地图的初始类型。mapTypeId包括如下四种类型：

google.maps.MapTypeId.HYBRID：显示卫星图像的主要街道透明层

google.maps.MapTypeId.ROADMAP：显示普通的街道地图

google.maps.MapTypeId.SATELLITE：显示卫星图像

google.maps.MapTypeId.TERRAIN：显示带有自然特征（如地形和植被）的地图

好了，上述基本都是从官网上贴来整理的，至此应该都能正常创建地图了。

新手注意：

但是问题来了，因为当时做项目，项目比较大，而且时间很紧，有个细节当时没注意，就是在写js的过程中，函数命名必须要要有 initMap()，不然会报错，提示 Uncaught InvalidValueError: initMap is not a function.

项目中有的地图是需要点击弹出地图层的，点击事件才要执行方法，然而每次都是自动执行，提示各种问题。百度谷歌了好久，答案纷飞，仍然毫无头绪，然后又耐心从头操作了一遍，看文档，对，当看到引入的js的时候，里面有个&callback=initMap ，卧槽，大骂一句，放到这么不起眼的地方，这不坑人么。这句话应该删除的。

后来仔细想想，还是自己技术不够扎实，如果没有callback 这个js里的initMap() 又怎么会执行呢？

今天先写这么多，明天写下如何创建marker标记，记录坐标位置，加油(^o^)/~

云服务器 GPU云服务器谷歌地图api 谷歌地图api接口谷歌地图 javascript地图谷歌

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90853.html

谷歌地图 API 开发之添加标记（解析以及补充）

摘要：今天又看了下官网，发现官网上有地图标记的详细说明。请注意，上述方法并不会删除该标记。查看示例也可以参考上一篇文章，谷歌地图开发之添加标记其实跟官网的基本原理也是一样的。表示该标记应该在原地弹跳。将自动调整图标大小。今天又看了下官网，发现官网上有地图标记的详细说明。当时居然眼瞎看不见，还琢磨了好久...#$%^&，一定是项目太急，没看到(^o^)/~地址：https://develop...

崔晓明 2019-08-22 10:35 评论0 收藏0
谷歌地图 API 开发之添加标记

摘要：创建地图之后，基本上都需要标记位置的，就是那个圆点。然后参考谷歌的，找了许久，网址代码如下创建对象地图居中到当前坐标这段运行效果，就是你点击地图就会添加一个标记。创建地图之后，基本上都需要标记位置的，就是那个圆点。然后参考谷歌的API，找了许久，网址：https://developers.google.com... 代码如下: Accessing arg...

huaixiaoz 2019-08-22 11:01 评论0 收藏0
谷歌地图 API 开发之信息窗口

摘要：信息窗口具有一个内容区域和一个锥形柄。添加信息窗口构造函数采用了对象字面量，后者为显示信息窗口指定了一组初始参数。其中包含此信息窗口锚定位置的。在标记上打开信息窗口将自动更新。用于指定信息窗口的最大宽度以像素为单位。信息窗口简介 InfoWindow 在地图上方给定位置的弹出窗口中显示内容（通常为文本或图像）。信息窗口具有一个内容区域和一个锥形柄。柄顶部与地图上的某指定位置相连。 ...

princekin 2019-08-20 10:13 评论0 收藏0