GoogleMap API 学习

前提:在GoogleAPI开发者中心(https://console.developers.google.com/project)有创建过项目,在库中添加启用Google Maps JavaScript API,在凭据中获取密钥,并设置密钥的访问规则,完成以上工作后,才会有使用GoogleMapAPI的key,才能在页面中使用GoogleMap显示功能。 MyGoogleMapAPIKey

使用获得的官方key的方式只需要引入外部js一样,引入script标签。 官方给的API接口的小Demo如下所示:

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAfXqW_NCcDT4xXIuM5osLZP0mO6BaWECc&sensor=false">
</script>

<script>
function initialize()
{
    var mapProp = {
        center:new google.maps.LatLng(1.347447,103.682663),
        zoom:13,
        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:800px;height:480px;"></div>

</body>
</html>


以上代码运行结果如下图所示: LittleGoogleMapDemo

上图选取的地点是Nanyang Technological University(南洋理工大学),放大的倍数是13,显示的模式是街道模式,有了官方的key之后,调用起来很方便。

以上代码拆分及解析:

1.初始化标准

这里的初始化原本是指HTML&CSS的基本操作,即下面的这段代码:

<!DOCTYPE html>
<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
<body>

</body>
</html>

上面的代码是标准规范的一些操作,在意识上,使用一个接口的时候,要先对这个接口的样式进行标准化一下,只是为了规范。这里想起了Vue.js里面在单个页面里面样式和DOM以及Script都能写在一起,确实在实现编码过程的时候,很随意,让人比较舒服。

2.添加GoogleMap API Key

像其他CDN的js文件的引入规则一样,需要将引入key的链接写在script标签中,

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

上面的key是开发者自己申请的,请求的链接为 http://maps.googleapis.com/maps/api/js,传递的参数有key和sensor两个:

3.GoogleMap API 支持异步加载

GoogleMap API的异步加载,可以在整个页面其他内容全部加载完成后,再显示需要显示的地图数据。 若使用异步加载的javascript代码:

function loadScript(){
     var script = document.createElement("script");
     script.type = "text/javascript";
      script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false&callback=initialize";
      document.body.appendChild(script);
}
window.onload = loadScript;

写在loadScript( )函数中的就是引入API的Script,在标签之后还加上了callback=initialize的参数,initialize( )函数会在整个API载入后执行。 使用window.onload来实现页面加载后再载入GoogleMap。

4.Map属性的确定

以下代码用来确定整个地图的某些属性:

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

首先创建一个Map对象定义地图属性:

center属性可以直接使用经纬度坐标来作为中心点,一般可以用GoogleMap API中的方法定义一个位置变量,然后直接调用:

var markerpoint = new google.maps.LatLng(30.512851,114.343816);

var mapProp = {
        center:markerpoint,
        zoom:13,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };

以变量的形式调用和引用,应该更符合规范。

mapTypeId的四种类型有:

四种显示类型对比如下图所示: Four kinds of MapType

在需要显示地图页面中创建一个id为googleMap的DOM,用于存放显示地图


<div style="width:800px;height:480px;" id="googleMap"></div>


创建一个Map对象将定义的属性和DOM对象关联起来:

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

加载创建的Map地图对象

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

页面完全载入后就能加载指定的Google地图。

5.Google地图叠加层处理

叠加层是地图上绑定到经纬度坐标的对象,会跟随地图放大缩小的移动而始终标记对应的地理坐标点。 在Google地图中加入标记,地图上的标记主要有以下几类:

在地图上添加标记点,一般通过 setMap() 方法:

    var map4=new google.maps.Map(document.getElementById("googleMapfour"), mapPropfour);
    var marker = new google.maps.Marker({
	    position: markerpoint,
    });
    marker.setMap(map4);

使用以上方法可以在地图上的指定点添加标记位置。

写在后面

今年八月的时候,我测试这个API的时候还不用科学上网,但是四个月过后的今天,获取API认证的时候,居然访问不了了,真的很心痛啊!封闭导致自嗨,自嗨导致自大,自大导致落后!惊人的相似!

GoogleMap API的资源加载如下图所示: LoadingGoogleMapResource