【jsp】如何插入谷歌地图并获取javascript api 秘钥

来源：互联网发布：建立少数民族数据库编辑：程序博客网时间：2024/05/29 17:35

今天突然公司的项目中用到的谷歌地图全部都报Google Maps API error: MissingKeyMapError这个错误，查阅谷歌map api（https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes）之后发现是缺少javascript api 密钥。

第一步

访问 API 控制台（网址为 https://code.google.com/apis/console）并使用您的 Google 帐户登录。

第二步

在控制台中激活谷歌地图的相关服务，然后进入谷歌api库，选择Google 地图 API下的对应程序（我用的是Google Maps JavaScript API）

第三步

点击为此 API 创建凭据，即可生成相关api的密钥，然后在地图文件中引入该密钥，例如：

<script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?sensor=false&key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">  </script>  1
2

最后，贴出该jsp源码

<%@ page language="java" contentType="text/html; charset=utf-8"      pageEncoding="utf-8"%>  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />      <style type="text/css">        html { height: 100% }        body { height: 100%; margin: 0; padding: 0 }        #map_canvas { height: 100% }      </style>      <script type="text/javascript"        src="http://maps.googleapis.com/maps/api/js?sensor=false&key=<span><span class="string">YOUR_API_KEY</span></span>&sensor=SET_TO_TRUE_OR_FALSE">      </script>      <script type="text/javascript">        function initialize() {          var mapOptions = {            //设置经纬度            center: new google.maps.LatLng(-34.397, 150.644),            zoom: 8,//地图的缩放度            mapTypeId: google.maps.MapTypeId.ROADMAP          };          //创建一个地图          var map = new google.maps.Map(document.getElementById("map_canvas"),              mapOptions);        }      </script>    </head>    <!-- 页面加载时初始化地图 -->    <body onload="initialize()">      <div id="map_canvas" style="width:100%; height:100%"></div>    </body>  </html>

0 0