基于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+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
-
基于Django集成CAS实现流程详解
-
基于JavaScript google map集成流程
-
Google Map API更新实现用户自定义标注坐标_javascript技巧
-
Javascript计算两个marker之间的距离(Google Map V3)_javascript技巧
-
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码_javascript技巧
-
Google Map Api和GOOGLE Search Api整合实现代码_javascript技巧
-
Google Suggest ;-) 基于js的动态下拉菜单_javascript技巧
-
Google Map API更新实现用户自定义标注坐标_javascript技巧