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

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地图

猜你喜欢