基于JavaScript google map集成流程
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集成流程的更多相关文章
- 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 ...
- Google Map JavaScript API V3 实例大全
Google Map JavaScript API V3 实例大全 基础知识 简单的例子 地理位置 语言 位置 坐标 简单的投影 事件 简单事件 关闭事件 多次添加事件 事件属性 控制 php禁用ui ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案（二）
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- 如何在Google Map中处理大量标记(ASP.NET)(转)
如何在Google Map中处理大量标记(ASP.NET)(原创-翻译) Posted on 2010-07-29 22:04 Happy Coding 阅读(8827) 评论(8) 编辑 收藏 在你 ...
- Google Map API使用详解（一）——Google Map开发背景知识
一.谷歌地图主页 谷歌地图对应不同的地区都会有一些专门的主页,首次登陆时会显示这些地区.比如,香港的:http://maps.google.com.hk,台湾的:http://maps.google. ...
- Google Map API 应用实例说明
目录 Google Map API 1基础知识 1.1 Google 地图 API 概念 1.2 Google 地图的"Hello, World" 1.2.1 加载 Google ...
- CodeMirror：基于JavaScript的代码编辑器
官方网站定义: http://codemirror.net/ CodeMirror is a versatile text editor implemented in JavaScript for t ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案（一）
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
随机推荐
- 设置 DNS 服务器转发试验
一.主节点的配置 1.yum install bind -y 安装 DNS 服务 2.vim /etc/named.conf 编辑 DNS 的配置文件 3. vim /etc/named.rfc191 ...
- Linux进程管理（ps、pstree、top、pidof、kill、nice、free）
进程号(Process ID,PID) 1.ps命令(process status) 无选项时只显示从当前终端当前用户的进程 ps aux 是用BSD的格式来显示 java这个进程显示的项目有:USE ...
- python_07
破解极限滑动认证 from selenium import webdriver from selenium.webdriver import ActionChains from PIL import ...
- 2019-10-9：渗透测试，基础学习the-backdoor-factory-master（后门工厂）初接触
该文章仅供学习,利用方法来自网络文章,仅供参考 the-backdoor-factory-master(后门工制造厂)原理:可执行二进制文件中有大量的00,这些00是不包含数据的,将这些数据替换成pa ...
- JSP内置对象详解及示例
目录 JSP 内置对象 out request response config application session pageContext page exception JSP 内置对象 jsp一 ...
- SpringMVC 前端传递list到后台
---恢复内容开始--- 1.前端获取传入后台的list 2.ajax写法: $.ajax({ type: 'post', url: url, async:false, dataType:" ...
- 细说JVM内存模型
细说JVM内存模型 前言 在正式学习 JVM 内存模型之前,先注意以下几个是问题: JVM 内存模型与 JAVA 内存模型不是同一个概念.JVM 内存模型是从运行时数据区的结构的角度描述的概念:而 J ...
- R 语言学习笔记（1）——R 工作空间与输入输出
什么是工作空间? 工作空间(workspace)就是当前 R 的工作环境,它储存着所有用户定义的对象(objectives)包括了向量.矩阵.函数.数据框.列表等. 处理 R 文件的工作流程 #设置当 ...
- 【跟唐老师学习云网络】 - 第6篇 ARP你在哪
[摘要] 这一章节你的角色就是ping报文这个"使者",你要去往目的地,然后回到本机.然而目的地路漫漫,不知道要经过多少个小地盘(局域网),没两把刷子也不好行走江湖.所以你作为使者 ...
- [NACOS HTTP-GET] The maximum number of tolerable server reconnection errors has been reached
错误的意思是:已达到可容忍的服务器重连接错误的最大数目.有两个解决思路:一个将这个值设置的更大:然后是排查自己连接服务哪儿出了问题.先说在哪儿设置这个值:在拉取nacos服务的注解配置中,添加一个属性 ...