基于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 插件汇总 ...
随机推荐
- Java编程思想——第14章 类型信息（二）反射
六.反射:运行时的类信息 我们已经知道了,在编译时,编译器必须知道所有要通过RTTI来处理的类.而反射提供了一种机制——用来检查可用的方法,并返回方法名.区别就在于RTTI是处理已知类的,而反射用于处 ...
- Apache中AllowOverride的详细配置使用
我们通常利用Apache的rewrite模块对URL进行重写,rewrite规则会写在 .htaccess 文件里.但要使 apache 能够正常的读取.htaccess 文件的内容,就必须对.hta ...
- linux 如何把一个装好的系统做成镜像（文件备份）
linux 如何把一个装好的系统做成镜像(文件备份) 我来答 浏览 11851 次来自电脑网络类芝麻团 2016-01-19 案例1(命令式操作) 像'ghost'那些备份系统,系统出了问题就恢复 ...
- elementui分页记录，reserve-selection
第一步:在<el-table></el-table>标签中加上 :row-key="getRowKeys" 第二步:在<el-table-column ...
- 构建之法组——“别吃错喽”微信小程序评价
此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9860 基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论 ...
- 简单聊一聊spring cloud stream和kafka的那点事
Spring Cloud Stream is a framework for building highly scalable event-driven microservices connected ...
- Process用法与进程详解
僵尸与孤儿进程 僵尸进程:父进程的子进程结束的时候父进程没有wait()情况下子进程会变成僵尸进程 孤儿进程(无害) 一个父进程退出,而它的一个或多个子进程还在运行,那么那些子进程将成为孤儿进程.孤儿 ...
- Oracle temp table
Tow kinds of temp table data keep method. One is delete when commit Anothe one is preseve when commi ...
- PHP fsockopen受服务器KeepAlive影响的解决
在开发过程中常常遇到这样的需求,模拟浏览器访问某接口,并获取返回数据.我们比较常使用的方法是fsockopen与接口建立连接,然后发出指令,然后通过fgets接受返回值. 但是我们发现,通过PHP模拟 ...
- Python之HTTP静态Web服务器开发
众所周知,Http协议是基于Tcp协议的基础上产生的浏览器到服务器的通信协议 ,其根本原理也是通过socket进行通信. 使用HTTP协议通信,需要注意其返回的响应报文格式不能有任何问题. 响应报文, ...