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

2016-08-02 22:44:00

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

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

          html, body { height: 100%; margin: 0; padding: 0; }          # map { height: 100%; }            var map;            function initMap() {              map = new google.maps.Map(document.getElementById('map'), {                center: {lat: -34.397, lng: 150.644},                zoom: 8              });            }

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

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

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

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

    html {height:100%}    body {height:100%;margin:0;padding:0}    # googleMap {height:100%}

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

添加 Google 地图 API Key

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

地图 DOM 元素

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

创建一个 Map 对象

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

表示地图的 JavaScript 类是 Map 类。该类的对象定义页面上的单个地图。（您可以创建该类的多个实例–每个对象都将定义页面上的一个不同地图。）我们利用 JavaScript new 运算符来新建该类的实例。
当您新建地图实例时，您需要在页面中以地图容器形式指定一个 HTML 元素。HTML 节点是 JavaScript document 对象的子项，我们通过 document.getElementById() 方法获取对该元素的引用。

定义地图属性

每个地图都有两个必需选项：center 和 zoom。还可以加上MapTypeIdmap = 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^)/~

关键字：JavaScript, 谷歌地图, 开放平台

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！