基于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 插件汇总 ...
随机推荐
- gcc在x64体系中如何传递参数，linux，mac，iOS适用
上一篇介绍了vc(windows)平台在x64体系当中,c函数的传参方式.本篇将要介绍gcc(类linux,mac)平台在x64中,c函数是如何传参的.为节约时间和篇幅,首先来定义一个有十个参数的函数 ...
- python中的__call__方法
在Python中,函数其实是一个对象: >>> f = abs >>> f.__name__ 'abs' >>> f(-) 由于 f 可以被调用, ...
- python 学习路程（一）
好早之前就一直想学python,可是一直没有系统的学习过,给自己立个flag,从今天开始一步步掌握python的用法: python是一种脚本形式的语言,据说是面向废程序员学习开发使用的,我觉得很适合 ...
- 2019-9-28：渗透测试，基础学习，DNS投毒
该文章仅供学习,利用方法来自网络文章,仅供参考 DNS劫持 目标机:虚拟机下的win7系统 目标ip:192.168.20.131 目标:使用ettercap进行apr投毒,对win7系统就行,DNS ...
- python 正确字符串处理（自己踩过的坑）
不管是谁,只要处理过由用户提交的调查数据,就能明白这种乱七八糟的数据是怎么一回事.为了得到一组能用于分析工作的格式统一的字符串,需要做很多事情:去除空白符.删除各种标点符号.正确的大写格式等.做法之一 ...
- 【Java并发系列】----JUC之Lock
显式锁 Lock 在Java 5.0之前,协调共享对象的访问时可以使用的机制只有synchronized和volatile.Java 5.0后增加了一些新的机制,但并不是一种替代内置锁的方法,而是当内 ...
- 删除排序数组中的重复项II
Given a sorted array nums, remove the duplicates in-place such that duplicates appeared at most twic ...
- Win10无法安装.NET Framework3.5的解决办法
诸位网友如果工作中使用WIN10遇到如图的这种问题,现将解决办法整理如下: 一.第一步就是修复系统:按“Windows+X”点击“Windows PowerShell(管理员)&命令提示符(管 ...
- 设置颜色的函数：rgb，hsv，color palettes
1.grb函数 (1)功能: 通过对给定的三个基本色红,绿,蓝的颜色饱和度(intensity)的设定,而创造颜色. 阿尔法透明度(alpha transparent):其值也能被指定,从0到max ...
- android java socket断线重连
android java socket断线重连 thread = new Thread(new Runnable() { @Override public void run() { while (tr ...