谷歌地图api v3学习之：起步_谷歌地图api 三d-CSDN博客

本文链接：https://blog.csdn.net/zhenlai2012/article/details/11098597

最近公司项目需要用到地图搜索功能，首先考虑的是gmap（谷歌地图api），一开始觉得它很神秘很难，但经过几天的研究发现其实很简单。谷歌官网api写的很详细，一目了然

。在此用的是version3版本，v2的现在停用了。

1.如果想用谷歌地图api来给自己的系统实现地图搜索和定位功能首先你必须获取谷歌的密钥才可以，创建密钥可以按照下面步骤来完成：

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

b、点击左侧菜单中的服务链接。

c、激活 Google Maps API v3 服务。

d、点击左侧菜单中的 API 访问链接。您可以从 API 访问页上的简单 API 访问部分获取 API 密钥。Maps API 应用会使用适用于浏览器应用的密钥。

（图中的红线部分便是密钥，在此我把它屏蔽掉了，不过大家可以自己注册gmial后激活该功能即可）

2.好了，现在密钥有了，那就开始gmap之旅吧

a、在开始前我们要做好准备工作，就是要引入gmap的api的js

 <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>

b、此处贴出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=YOUR_API_KEY&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 οnlοad="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

3.启动服务器看看运行效果

（例子中的经纬度定位是悉尼，如图红色标记）

4.有人会觉得不够友好，例子的经纬度是不是真的是悉尼呢？还好gmap为我们提供的标记功能，下面是添加一个标记的后的js代码

<script type="text/javascript">
      var map;
      var position= new google.maps.LatLng(-34.397, 150.644);
      function initialize() {
        var mapOptions = {
          //设置经纬度
          center: position,
          zoom: 8,//地图的缩放度
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        //创建一个地图
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        createMark();
      }
      
      //创建标记
      function createMark(){
        var marker = new google.maps.Marker({
    	position:position,
    	map: map,//要添加标记的地图
    	title: 'Click to zoom'
        });
      }
    </script>

看看效果吧