欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

基于JavaScript google map集成流程

程序员文章站 2022-05-29 08:05:12
google地图集成流程 一、获取Google Map API密钥 1、进入Google官网 => https://www.google.com.hk/ ，申请一个谷歌账号（如果没有）然后访问下面网址：https://console.cloud.google.com/google/maps-apis ......

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地图平台：

 基于JavaScript google map集成流程

2、单击项目下拉菜单，然后选择或创建要为其添加api密钥的项目。

 基于JavaScript google map集成流程

创建项目：

 基于JavaScript google map集成流程

3、点击菜单按钮，然后选择api和服务>凭据。

 基于JavaScript google map集成流程

注意：正确选择要添加api密钥的项目，点击创建凭据下的api密钥。

 基于JavaScript google map集成流程

创建api密钥成功则会提示一下选框。

 基于JavaScript google map集成流程

到现在api密钥就创建成功了，根据个人需求可以设置对密钥做一些限制，接下来在“信息中心”点击“启用api和服务”进入api选择页面。

 基于JavaScript google map集成流程

 

 基于JavaScript google map集成流程

这里我们选择的是maps javascript api进去后点击 启用 就ok了，新的api密钥在“ 凭据”页面的api密钥下列出。

 基于JavaScript google map集成流程

二、引入google 地图

1、在javascript中我们通过<script></script>标签引入google地图的api，上图例中把虚线框中的部分用我们生成的密钥key替换即可，下面我们将创建一个简单实例来说明。

 基于JavaScript google map集成流程

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>

 

运行代码浏览器显示如下

 基于JavaScript google map集成流程

3、常见问题解决

在开发过程中可能会遇到地图显示带有文本“仅用于开发目的”的加水印的变暗地图或“负”街景图像和提示未正确加载google maps，遇到这种问题一般问题为api密钥或计费存在问题。

（1）有没有正确启用api密钥

（2）项目未创建结算账号开启计费功能

（3）提供的计费方式无效，例如信用卡过期

（4）api超出每日设定的限制

（5）api密钥是否设定ip限制

一般出现上述描述问题，通常是（2）和（3）的问题。

上一篇： 使用python的一些笔记

下一篇： 滚轮滚动事件

推荐阅读