从零开始学google地图API(1)--获取api

google
登录进去 ,如果有google账号就直接登录，如果没有就注册一下
进去之后大概这个样子
点击左边的Google地图,然后会看到有很多api,选择你需要使用的
这里我们选择Maps JavaScript API
点击进去启用就可以
然后我们需要记住我们的api key
可以在凭据里面找到

下面我们来在我们的页面上添加一个google地图

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script><script>
function initialize()
{var mapProp = {center:new google.maps.LatLng(51.508742,-0.120850),zoom:5,mapTypeId:google.maps.MapTypeId.ROADMAP};var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

效果图

首先是googlemap api
跟之前的jquery类似，google api也需要引用

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

注意修改两个地方
key=YOUR_API_KEY 可以在你自己申请的goolge map里找到，替换成你自己的api
sensor指明应用程序是否使用一个传感器 (类似 GPS 导航) 来定位用户的位置,参数值可以设置为 true 或者 false
如果你的应用是安全的HTTP(HTTPS:HTTP Secure)应用,你可以使用 HTTPS 来加载 Google 地图 API,

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Map() 构造器创建了一个新的地图并插入到指定的HTML元素中（一般是<div> 元素)
new google.maps.Map(HTMLElement,MapOptions)
HTMLElement 规定要把地图放置在哪个 HTML 元素中
MapOptions 带有地图初始化变量/选项的 MapOptions 对象//就是我们之前定义的地图属性

在上面的案例中

function initialize()
{var mapProp = {center:new google.maps.LatLng(51.508742,-0.120850),zoom:5,mapTypeId:google.maps.MapTypeId.ROADMAP};var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
};

一般情况下，我们都会在一个初始化函数中定义好map属性，然后通过调用初始化函数实现接入地图
mapProp在这里就是我们自定义的地图属性，可以看到里面有
center
中心点,指定了地图的中心,该中心通过坐标（纬度，经度）在地图上创建一个中心点
zoom
缩放级数,zoom:0,显示了整个地球地图的完全缩放,zoom后面的数越大，显示的范围越小，看的越详细
mapTypeId
地图的初始类型,包括如下四种类型
google.maps.MapTypeId.HYBRID：显示卫星图像的主要街道透明层
google.maps.MapTypeId.ROADMAP：显示普通的街道地图
google.maps.MapTypeId.SATELLITE：显示卫星图像
google.maps.MapTypeId.TERRAIN：显示带有自然特征（如地形和植被）的地图

定义完之后，通过刚才介绍的Map创建函数生成我们的地图
var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);
参数应该比较好理解,document.getElementById(“googleMap”),在之后的body部分里，我们可以通过id绑定来显示地图
mapProp就是上一步定义的地图对象

initialize函数写好后，还要有一个调用条件

google.maps.event.addDomListener(window, 'load', initialize);

加载地图,窗口(window)载入后(load)通过执行 initialize() 函数(刚才定义的地图初始化函数)来初始化 Map 对象，这样可以确保在页面完全载入后再加载 Google 地图

<div id="googleMap" style="width:500px;height:380px;"></div>//我们可以在 <div> 元素中设置地图的大小,div里面style对应的大小就是地图的大小

通常 Google 地图使用于 <div> 元素中,令div的id为刚才的googleMap实现在div里显示地图

上面一种是预先加载好google的api,同样我们也可以在页面完全载入后再加载 Google 地图 API

<!DOCTYPE html>
<html>
<head><script>
function initialize()
{var mapProp = {center:new google.maps.LatLng(51.508742,-0.120850),zoom:5,mapTypeId:google.maps.MapTypeId.ROADMAP};var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}function loadAPI()
{var script = document.createElement("script");//创建一个javascript的节点script.type = "text/javascript";//类型script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";//根之前一样，替换掉你的内容document.body.appendChild(script);
}
window.onload = loadAPI;google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

跟刚才的区别主要是少了一个<script src></script>,多了一个loadAPI函数

function loadAPI()
{var script = document.createElement("script");//创建一个javascript的节点其实就是<script src></srcipt>script.type = "text/javascript";//类型,其实不写也可以script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";//跟之前一样，替换成 你的内容document.body.appendChild(script);
}
window.onload = loadAPI;//页面加载时初始化

使用了 window.onload 来实现页面载入时加载 Google 地图 ,loadAPI() 函数创建了加载 Google 地图 API <script> 标签。此外在标签的末尾添加了 callback=initialize参数，initialize()作为回调函数会在API完全载入后执行,效果都一样，还是根据个人喜欢选择

再额外简单补充一点
Map()
这个本来是在后面需要使用上的，但我在这里简单说明一下
var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);
生成了个map,绑定的是我们map对象，可以通过map.function()来进一步实现以下功能

fitBounds(LatLngBounds)
将地图视层尽可能大的设定在给定的地理边界内,无返回值,通常搭配getBounds

getBounds()
返回当前视口的西南纬度/经度和东北纬度/经度(LatLng,LatLng )
通过map.fitBounds(layer.getBounds());来实现地图视层的调整(layer会在之后讲到，可以是标记，也可以是一个点)

getCenter()
返回地图的中心的纬度/经度,(LatLng）

getDiv()
返回包含地图的 DOM 对象
刚才试了一下,返回[object HTMLDivElement]

getHeading()
返回航拍图像的罗盘航向度数（支持 SATELLITE 和 HYBRID 地图类型）(number)

getMapTypeId()
返回当前地图类型,跟先前提到的对应( hybrid roadmap satellite terrain )

getProjection()
返回当前 Projection（投影）。

getStreetView()
返回绑定到地图的默认的 StreetViewPanorama。

getTilt()
返回航拍图像的入射角度数（支持 SATELLITE 和 HYBRID 地图类型）。

getZoom()
返回地图的当前缩放级别(number,0,1,2,3…)

panBy(xnumber,ynumber)
通过以像素计的给定距离改变地图的中心,无返回值

panTo(LatLng)
改变地图的中心为给定的 LatLng,无返回值

panToBounds(LatLngBounds)
将地图平移所需的最小距离以包含给定的 LatLngBounds,无返回值,同样也可以跟上面getBounds搭配

setCenter(LatLng)
改变地图的中心为给定的 LatLng,无返回值,我个人不知道它和panTo有什么明显的区别，感觉上差不多

setHeading(number)
设置航拍图像的罗盘方向（以度为单位进行测量）基本方向为北方,无返回值

setMapTypeId(MapTypeId)
改变要显示的地图类型,无返回值

setOptions(MapOptions)
无返回值

setStreetView(StreetViewPanorama)
绑定一个 StreetViewPanorama 到地图上,无返回值

setTilt(number)
置航拍图像的入射角度数（支持 SATELLITE 和 HYBRID 地图类型）无返回值

setZoom(number)
无返回值

Map() 的事件
bounds_changed
当可视区域范围更改时会触发此事件。

center_changed
当地图 center（中心）属性更改时会触发此事件。

click
当用户点击地图（但不是点击标记或信息窗口）时会触发此事件MouseEvent
dblclick
当用户双击地图时会触发此事件。请注意，触发此事件前还会触发点击事件MouseEvent

drag
当用户拖动地图时会反复触发此事件。

dragend
当用户停止拖动地图时会触发此事件。
dragstart
当用户开始拖动地图时会触发此事件。

heading_changed
当地图 heading（方向）属性更改时会触发此事件。

idle
当地图在平移或缩放之后变为闲置状态时会触发此事件。

maptypeid_changed
当 mapTypeId 属性更改时会触发此事件。

mousemove
只要用户的鼠标在地图容器上移动，就会触发此事件MouseEvent

mouseout
当用户的鼠标从地图容器上退出时会触发此事件MouseEvent

mouseover
当用户的鼠标进入地图容器时会触发此事件MouseEvent

projection_changed 当投影更
改时会触发此事件。

resize
当地图（div）更改尺寸时会触发此事件。

rightclick
当用户右击地图时会触发此事件 MouseEvent

tilesloaded
当可见图块载入完成后会触发此事件。

tilt_changed
当地图 tilt（倾斜）属性更改时会触发此事件。

zoom_changed
当地图 zoom（缩放）属性更改时会触发此事件。

从零开始学google地图API(1)--获取api_key并显示google地图相关推荐

【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图...
原文:[高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...
转载：高德地图API学习从零开始学高德JS API（一）地图展现
原文地址:https://www.cnblogs.com/milkmap/p/3687855.html [高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图摘 ...
【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文地址为: [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址 ...
【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文地址为: [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的 ...
谷歌离线地图Api附获取教程
三版离线Api下载链接:https://pan.baidu.com/s/1ei6tyLKTHMIGdDuowqQW6Q 提取码:x1va GoogleMapAPIV3来自: https://www.c ...
python批量爬取小网格区域坐标系_Python爬虫实例_利用百度地图API批量获取城市所有的POI点...
上篇关于爬虫的文章,我们讲解了如何运用Python的requests及BeautifuiSoup模块来完成静态网页的爬取,总结过程,网页爬虫本质就两步: 1.设置请求参数(url,headers,co ...
php 百度地图api获取经纬度,调用百度地图API接口获取地铁站的经纬度信息
今天我们来看一下,如何通过百地图API来获取地点的经纬度.首先百度地图提供了强大的API接口,我们可以通过调用它来实现目的.这是网址:https://lbsyun.baidu.com/.首先想要调用A ...
【python】python利用百度地图API：获取经纬度、地图撒点
本文目的: python通过百度地图API,获取所给地址的经纬度,并且在百度地图上进行撒点. 另:百度地图API功能强大,如: GPS功能(单个点沿线运动). 信息窗口示例(添加纯文字的信息窗口). ...
Python3调用百度地图API接口获取结构化地址
在实际应用中,我们也许会有这样的需求,输入一个地名,就能够知道这个地方的准确地址.例如输入"清华大学",我们就可以知道清华大学在北京的哪个区哪条道路.正好百度地图开放平台服务提供了 ...

从零开始学google地图API(1)--获取api_key并显示google地图

从零开始学google地图API(1)--获取api_key并显示google地图相关推荐

最新文章

热门文章