google地图集成流程

一、获取Google Map API密钥

1、进入Google官网 => https://www.google.com.hk/ ，申请一个谷歌账号（如果没有）然后访问下面网址：https://console.cloud.google.com/google/maps-apis/overview?hl=zh-cn&project=my-project-map-251306&folder=&organizationId=

跳转到Google地图平台：

2、单击项目下拉菜单，然后选择或创建要为其添加API密钥的项目。

创建项目：

3、点击菜单按钮，然后选择API和服务>凭据。

注意：正确选择要添加API密钥的项目，点击创建凭据下的API密钥。

创建API密钥成功则会提示一下选框。

到现在API密钥就创建成功了，根据个人需求可以设置对密钥做一些限制，接下来在“信息中心”点击“启用API和服务”进入API选择页面。

这里我们选择的是Maps JavaScript API进去后点击 启用 就OK了，新的API密钥在“ 凭据”页面的API密钥下列出。

二、引入Google 地图

1、在JavaScript中我们通过<script></script>标签引入Google地图的API，上图例中把虚线框中的部分用我们生成的密钥key替换即可，下面我们将创建一个简单实例来说明。

2、案例分析

<!DOCTYPE html> //HTML5代码声明

<html>

<head>

<style>

//给地图容器div（id为map）添加样式，宽、高和位置

#map{

width: 1100px;

height: 600px;

border: 1px #ccc solid;

margin-left: 50%;

transform:translateX(-50%);

}

</style>

</head>

<body>

<div id="map"></div> //创建地图容器

<script>

//创建地图

function initMap() {

//定义地图中心位置，lat是经度，lng是纬度

var myLatLng = {lat: 39.9039799720, lng: 116.4001938782};

//创建地图对象

var map = new google.maps.Map(document.getElementById('map'), {

center: myLatLng, //地图中心坐标

zoom: 4 //地图缩放等级，1为世界，5为大陆，10为城//市，15为街道，20为建筑物。

});

//添加地图标记

var marker = new google.maps.Marker({

map: map,

position: myLatLng,//标记坐标

title: 'Hello World!'//鼠标移动到标记上显示：Hello //World!

});

}

</script>

//引入google地图API，国内使用

<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyDMG25XEEtUPjYWNGtF4CIwctk62_Z-6pE&callback=initMap&language=en">

</script>

//引入google地图API，国内需要通过VPN才能使用

<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMG25XEEtUPjYWNGtF4CIwctk62_Z-6pE&callback=initMap"

async defer> -->

//上述两种引入api二选一即可

</script>

</body>

</html>

运行代码浏览器显示如下

3、常见问题解决

在开发过程中可能会遇到地图显示带有文本“仅用于开发目的”的加水印的变暗地图或“负”街景图像和提示未正确加载Google Maps，遇到这种问题一般问题为API密钥或计费存在问题。

（1）有没有正确启用api密钥

（2）项目未创建结算账号开启计费功能

（3）提供的计费方式无效，例如信用卡过期

（4）API超出每日设定的限制

（5）API密钥是否设定IP限制

一般出现上述描述问题，通常是（2）和（3）的问题。

基于JavaScript google map集成流程的更多相关文章

  1. javascript google map circle radius_changed ,angularjs google map circle radius_changed

    javascript: var cityCircle = new google.maps.Circle({ strokeColor: '#FF0000', strokeOpacity: 0.8, st ...

  2. Google Map JavaScript API V3 实例大全

    Google Map JavaScript API V3 实例大全 基础知识 简单的例子 地理位置 语言 位置 坐标 简单的投影 事件 简单事件 关闭事件 多次添加事件 事件属性 控制 php禁用ui ...

  3. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案（二）

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  4. 如何在Google Map中处理大量标记(ASP.NET)(转)

    如何在Google Map中处理大量标记(ASP.NET)(原创-翻译) Posted on 2010-07-29 22:04 Happy Coding 阅读(8827) 评论(8) 编辑 收藏 在你 ...

  5. Google Map API使用详解（一）——Google Map开发背景知识

    一.谷歌地图主页 谷歌地图对应不同的地区都会有一些专门的主页,首次登陆时会显示这些地区.比如,香港的:http://maps.google.com.hk,台湾的:http://maps.google. ...

  6. Google Map API 应用实例说明

    目录 Google Map API 1基础知识 1.1 Google 地图 API 概念 1.2 Google 地图的"Hello, World" 1.2.1 加载 Google ...

  7. CodeMirror：基于JavaScript的代码编辑器

    官方网站定义: http://codemirror.net/ CodeMirror is a versatile text editor implemented in JavaScript for t ...

  8. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  9. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案（一）

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

随机推荐

  1. CSS：CSS弹性盒子布局 Flexible Box

    一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...

  2. UML分析AsyncDisplayKit框架-ASMuplexImageNode异步下载时序图。

    PS:博客园图片服务器不正常工作,数据上传后服务器返回http500,园方迟迟还没解决. 我从2016-01-18 05:52向园方反馈问题-请问博客园的图片服务器有在正常运行吗,至此时2016-01 ...

  3. C# 根据字符串生成二维码

    1.先下载NuGet包(ZXing.Net) 2.新建控制器及编写后台代码 using System; using System.Collections.Generic; using System.D ...

  4. shodan 文档学习笔记

    Table of Contents 1. Introduction 1.1. All About the Data 1.2. Data Collection 1.3. SSL in Depth 1.3 ...

  5. 线程中synchronized关键字和lock接口的异同

    一.synchronized关键字 1.可以用来修饰代码块 synchronized (this) { // 同步的关键字 this 表示当前线程对象 if (num == 0) { break; } ...

  6. Stream系列（七）distinct方法使用

    EmployeeTestCase.java package com.example.demo; import lombok.Data; import lombok.ToString; import l ...

  7. Android ListView的header footer设置visibility gone不起作用

    常用的ViewGroup,例如LinearLayout,在onMeasure方法内对每个child view执行measure前,会判断child view的visibility是否为gone.如果是 ...

  8. OSI-传输层

    OSI-传输层 端口号(2字节 SYN(1bit) ACK(1bit) 会话多路复用(为什么一个IP地址可以做很多事情?) 源端口地址可以不同 五元组(世界上没有相同的2个五元组) 源IP地址-目的I ...

  9. Qt之高DPI显示器(一) - 解决方案整理

    目录 DPI发展 1.PPI 2.DPI 一.Win自适应系统 二.Qt机制 1.Windows系统DWM缩放 2. Qt适配高DPI 3.适配DPI结论 三.Qt适配 四.自己适配 1.窗口大小 2 ...

  10. React - 组件：类组件

    目录: 1. 类组件有自己的状态 2. 继承React.Component-会有生命周期和this 3. 内部需要一个render函数(类组件会默认调用render方法,但不会默认添加,需要手动填写r ...