基于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 插件汇总 ...
随机推荐
- mysql数据库如何赋予远程某个IP 访问权限
1.授权用户root使用密码jb51从任意主机连接到mysql服务器: 代码如下: GRANT ALL PRIVILEGES ON *.* TO 'ROOT'@'%' IDENTIFIED BY 'j ...
- useReducer代替Redux
创建state.js import React, { createContext,useContext,useReducer } from 'react'; export const countTex ...
- ubuntu 16.04源码编译和配置caffe详细教程 | Install and Configure Caffe on ubuntu 16.04
本文首发于个人博客https://kezunlin.me/post/b90033a9/,欢迎阅读! Install and Configure Caffe on ubuntu 16.04 Series ...
- Sql server中用现有表中的数据创建Sql的Insert插入语句
之前,在Codeproject发表过一篇关于用现有表中数据创建Insert的Sql语句的存储过程,今天将其搬到这里来,注意本存储过程仅适用于SQL SERVER. 介绍 一些时候,你想导出一些现有表中 ...
- Windows Server 2008 服务器重启后卡死在Windows Update 页面问题处理
Windows Update 服务器 服务器是联想RD640 操作系统Windows Server 2008 R2 Enterprise版 补丁版本是SP1 远程windows服务器时,一直处于远程建 ...
- 2019牛客暑期多校训练营（第九场） E All men are brothers
传送门 知识点:并查集+组合数学 并查集合并操作可以理解为使得两个集合的人互相成为朋友,也就是两个集合并在了一起,答案是要求从所有人中挑出四个互相不是朋友的四个人,比较基础的组合数学知识,但因为每个集 ...
- Objective-C (OC)
1.OC 运行效率比较高,仅次于c.开发过程时,效率也比较高,不会次于java和C++: :表示继承 “{}”之间写字段或声明 }和@end之间写函数 import 相当于include 作用于和j ...
- rep()函数简介
rep()函数:重复 rep(x,...) rep.int(x,times) rep_len(x,length.out) ·x:一个向量(vector),一个因子(factor),一个POSIXct或 ...
- Vue项目解析
各个文件夹 node_modules:用来放环境依赖 public:用来放公共资源,里面的index.html文件,就是初始的挂载点.被app.vue给取代了. src:放各种资源的. assets: ...
- VLAN实验2（配置Trunk接口）
本实验基于<HCNA网络技术实验指南> 本实验使用eNSP软件 原理概述: 在以太网中,通过划分VLAN来隔离广播域和增强网络通信的安全性.以太网通常由 多台交换机组成,为了使VLAN的数 ...