谷歌服务:Google Maps JavaScript API
使用前准备
能访问外网,有Google账户。
进入开发者控制台
创建项目
初次需要创建一个项目,作为使用的依托。
我们创建名为test
的项目,进入后再选择API和服务
模块。
启用相应API
点击左侧库
模块,进入API
选择页面,找到Google Maps JavaScript API
点击并启用。
创建密钥
点击左侧密钥
模块,创建一个API密钥
。
密钥是使用API
的必须的标识符,可以多地多方使用。
密钥一般有某些配额
,比如访问次数、每次访问的流量等等。
密钥可以自定义某些限制
,比如使用此密钥的网站只能是某某域名下的等等。
开始使用
Map JS API 官方使用介绍 与 Map JS API 官方API文档
每一门框架,都有自己的编写思想和使用规则,而这些东西与其它框架很多时候是互通可类比的。
所以,我们要使用之前的经验来类比学习新的框架,并在查看官方文档,API结构
时细细感受此框架的规则。 JS Map API
有中文文档,而且内容详细通俗易懂,所以在这里不再作介绍。但今后会就某些需要注意的地方持续更新。
注意
下面代码中的key
是本人真实的密钥,仅仅为了方便共同学习使用。
毕竟初次直接的成功运行,不仅能保持和提高探究的热情,更能节约一大笔无谓的时间花销。
不过因为有配额限制,希望大家温柔的对待。
在普通页面中使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> <div id="map"></div> <script> "use strict"; var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: { lat: 34, lng: 106 }, }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSqv9FMHThX9DU_JK_pbwxzBQushtGfv4&callback=initMap" async defer></script> </body> </html>
在前端框架中使用
以vue.js
为例。
这里使用了最原始的 google-maps 包,可以使用npm
直接安装。
Google
的很多服务不是静态的Library
(可以与JQ
对比)。
每次将不同的配置通过API
发送给Google
,它再返回我们需要的东西(代码图片等等)。
也即是说,初次使用时,都要发送请求接收到相应对象后,我们再使用它以执行相应的操作。
这也意味着我们安装的依赖包,里面不是其源代码,而是帮助我们在框架的环境下请求其源代码的代码。
import GoogleMapsLoader from 'google-maps'; export default { name: 'google-map', mounted() { GoogleMapsLoader.KEY = 'AIzaSyBSqv9FMHThX9DU_JK_pbwxzBQushtGfv4'; GoogleMapsLoader.load((google) => { let map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: { lat: 34, lng: 106 } }); }); } };