谷歌服务：Google Maps JavaScript API

since1986 发布于2019-08-22 17:01 / 2011人阅读

摘要：使用前准备能访问外网，有账户。进入开发者控制台谷歌开发者控制台创建项目初次需要创建一个项目，作为使用的依托。我们创建名为的项目，进入后再选择和服务模块。密钥是使用的必须的标识符，可以多地多方使用。的很多服务不是静态的可以与对比。

使用前准备

能访问外网，有Google账户。

进入开发者控制台

谷歌开发者控制台

创建项目

初次需要创建一个项目，作为使用的依托。
我们创建名为test的项目，进入后再选择API和服务模块。

启用相应API

点击左侧库模块，进入API选择页面，找到Google Maps JavaScript API点击并启用。

创建密钥

点击左侧密钥模块，创建一个API密钥。
密钥是使用API的必须的标识符，可以多地多方使用。
密钥一般有某些配额，比如访问次数、每次访问的流量等等。
密钥可以自定义某些限制，比如使用此密钥的网站只能是某某域名下的等等。

开始使用

Map JS API 官方使用介绍与 Map JS API 官方API文档
每一门框架，都有自己的编写思想和使用规则，而这些东西与其它框架很多时候是互通可类比的。
所以，我们要使用之前的经验来类比学习新的框架，并在查看官方文档，API结构时细细感受此框架的规则。
JS Map API有中文文档，而且内容详细通俗易懂，所以在这里不再作介绍。但今后会就某些需要注意的地方持续更新。

注意
下面代码中的key是本人真实的密钥，仅仅为了方便共同学习使用。
毕竟初次直接的成功运行，不仅能保持和提高探究的热情，更能节约一大笔无谓的时间花销。
不过因为有配额限制，希望大家温柔的对待。

在普通页面中使用





  
  Document

在前端框架中使用

以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 }
      });
    });
  }
};

GPU云服务器云服务器 google-maps Google谷歌 google 导航api google图像识别api

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94775.html

关于谷歌Google Maps JavaScript API 的学习与分享

摘要：最近参与页面插入谷歌地图的项目，因此在此分享下我的学习经验，第一次写，请多担待首先，讲下项目的需求，在网页进行点击产品列表，渲染对应的地图信息以及对应的详情信息，并且修改谷歌固有标签以及点击标签出现，展示详细信息以及对应的产品。最近参与页面插入谷歌地图API的项目，因此在此分享下我的学习经验，第一次写，请多担待！首先，讲下项目的需求，在网页进行点击产品列表，渲染对应的地图信息以及对...

HackerShell 2019-08-02 15:20 评论0 收藏0
关于谷歌Google Maps JavaScript API 的学习与分享

摘要：最近参与页面插入谷歌地图的项目，因此在此分享下我的学习经验，第一次写，请多担待首先，讲下项目的需求，在网页进行点击产品列表，渲染对应的地图信息以及对应的详情信息，并且修改谷歌固有标签以及点击标签出现，展示详细信息以及对应的产品。最近参与页面插入谷歌地图API的项目，因此在此分享下我的学习经验，第一次写，请多担待！首先，讲下项目的需求，在网页进行点击产品列表，渲染对应的地图信息以及对...

silenceboy 2019-08-23 18:09 评论0 收藏0
谷歌地图 API 开发之新建地图

摘要：最近项目用到谷歌地图，但是看谷歌文档，对于国人来说，还是比较吃力的，网上找资料也并没有太多的资料，所以就想分享给大家。显示了整个地球地图的完全缩放。最近项目用到谷歌地图，但是看谷歌api文档，对于国人来说，还是比较吃力的，网上找资料也并没有太多的资料，所以就想分享给大家。但是因为本人太懒了，每次研究技术完事时间一久就忘了，更别提分享了，在朋友的鼓励支持之下，重新开始写博客，共享给大家...

Winer 2019-08-22 10:34 评论0 收藏0
谷歌地图 API 添加形状

摘要：谷歌地图形状官网简介您可以向地图添加各种形状。移除园如需移除地图中的圆，请调用方法，并传递作为其自变量。将形状设置为可拖动默认情况下，在地图上绘制的形状位置固定。最近加班真是累成狗啊，天天10点以后下班。还有其他的事情，总之都是要死要死的感觉，苦逼的程序员。谷歌地图形状官网：https://developers.google.com... 简介您可以向地图添加各种形状。形状是地图上...

xiaoxiaozi 2019-08-21 14:21 评论0 收藏0