基于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 插件汇总 ...
随机推荐
- 系统信息命令（uname、dmesg、df、hostname、free）
uname 显示计算机及操作系统相关的信息,uname -a显示全部信息,uname -r内核的发行号,各种信息可以有单独的选项分别指出 [lixn@Fedora24 ~]$ uname -a Lin ...
- Elasticsearch从入门到放弃：文档CRUD要牢记
在Elasticsearch中,文档(document)是所有可搜索数据的最小单位.它被序列化成JSON存储在Elasticsearch中.每个文档都会有一个唯一ID,这个ID你可以自己指定或者交给E ...
- 解决failed to push some refs to 'git@github.com:TQBX/GIT-Github-.git'问题
解决以下问题问题: git pull origin master --allow-unrelated-histories 进入vim界面->ESC->:wq 重复第一步->git p ...
- linux history（命令历史）
1.bash中默认命令记忆可达1000个.这些命令保存在主文件夹内的.bash_history中. 2.~/.bash_history:记录的是前一次登录以前所执行过的命令.至于本次登录的命令暂时存储 ...
- 对 /langversion 无效；必须是 ISO-1、ISO-2、3、4、5 或 Default
反编译或者.net用更高版本打开时会出现这个问题,解决办法如下: 1.网页版程序,将解决方案中的Web.config中的 /langversion 的值改为指定的值,既可以解决,我这里采用的是默认值, ...
- 【10分钟学Spring】：（一）初识Spring框架
简介 Spring是一个轻量级的企业级的Java开发框架.主要是用来替代原来更加重量级的企业级Java技术,比如EJB(Enterprise JavaBean).Java数据对象(Java Data ...
- CentOS 7 网卡 bond 配置
第一块网卡配置 [root@localhost network-scripts]# cat ifcfg-eth0 TYPE=Ethernet BOOTPROTO=none USERCTL=no DEV ...
- redis centos 6.x 启动关闭脚本
#!/bin/sh #Configurations injected by install_server below.... EXEC=/usr/local/bin/redis-server CLIE ...
- 进入编辑模式、vim命令模式、vim实践
第4周第5次课(4月13日) 课程内容:5.5 进入编辑模式5.6 vim命令模式5.7 vim实践 5.5 进入编辑模式 所谓编辑模式就是进入到一个可以编辑文本文档的模式,常规的方式就是按小i进入编 ...
- python_网络编程
网络ISO(国际标准化组织)--->网络体系结构标准(OSI模型)OSI: 网络信息传输比较复杂需要很多功能协同-->将功能分开,降低耦合度,让每个模块完成一定的功能-->将这些模块 ...