18、谷歌地图API使用指南

python9snake

于 2025-11-16 14:20:22 发布

阅读量10

点赞数

CC 4.0 BY-SA版权

分类专栏：解锁HTML5数据可视化文章标签：谷歌地图API 地理数据可视化获取API密钥

本文链接：https://blog.youkuaiyun.com/python9snake/article/details/155008521

解锁HTML5数据可视化专栏收录该内容

21 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

谷歌地图API使用指南

在地理数据可视化和交互性地图应用开发中，谷歌地图API提供了强大的功能和丰富的工具。本文将详细介绍如何使用谷歌地图API，包括获取API密钥、创建地图、添加标记和事件，以及自定义地图控件等内容。

1. 地理图表基础操作

在处理地理图表时，除了其他操作，还可以对特定区域进行缩放。以下是实现区域缩放的代码示例：

var options = {
    width: 800,
    height: 600,
    region: 'MX',
    colorAxis: {
        colors: ['#22ff22', 'red']
    }
};

若要了解可能的区域值列表，可以参考相关国家列表。在此示例中，我们将地图缩放至“MX”区域。

2. 获取谷歌API密钥

要使用大多数谷歌API，必须拥有谷歌API密钥。以下是获取谷歌API密钥的步骤：
1. 登录API控制台：访问 https://code.google.com/apis/console 。
2. 选择服务选项：在左侧菜单中选择“Services”。
3. 激活所需的API：例如，在后续创建谷歌地图的操作中，我们将使用谷歌地图API v3服务。
4. 获取API密钥：再次在左侧菜单中选择“API Access”，复制API密钥，并在未来的谷歌API项目中使用。

需要注意的是，谷歌API有一定的限制和约束。虽然大多数API对于中小型网站是免费使用的，但你需要遵守相关规则。请参考每个库的具体规则和规定。

3. 创建谷歌地图

数据与地理之间存在着天然的联系，将数据展示在地图上能使其更具意义。使用实时地图是一个很好的选择，它可以让用户与集成了地理区域内数据展示的用户界面进行交互。以下是创建一个全屏聚焦于法国的谷歌地图的步骤：

3.1 创建HTML文件

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps Hello world</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="jsmap"></div>
  </body>
</html>

3.2 添加视口信息（可选）

此步骤是为移动设备提供页面渲染方向的指导。如果不关心在移动设备上访问地图，可以跳过此步骤。

<head>
  <title>Google Maps Hello world</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    
</head>

3.3 添加样式信息

<style>
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #jsmap { height: 100%; width:100% }
</style>

3.4 加载谷歌地图v3 API

<script src="http://maps.googleapis.com/maps/api/js?key=ADD_YOUR_KEY&sensor=true">

请将 ADD_YOUR_KEY 替换为你自己的API密钥。 sensor 参数是必需的，必须设置为 true 或 false 。如果地图需要知道用户的位置，则应将其设置为 true ；否则，可以设置为 false 。

3.5 添加JavaScript文件引用

<script src="./09.03.googleJSmaps.js"></script>

3.6 添加加载触发事件

<body onload="init();">

3.7 创建初始化函数

在 09.03.googleJSmaps.js 文件中添加以下代码：

function init() {
    var mapOptions = {
        center: new google.maps.LatLng(45.52, 0),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("jsmap"), mapOptions);
}

3.8 加载HTML文件

完成上述步骤后，加载HTML文件，你将看到一个全屏聚焦于法国的路线图。

4. 经纬度的使用

经纬度（lat/long）是一种将地球划分为网格状模式的坐标系统，便于在地球上定位点。纬度（lat）表示垂直空间，经度（long）表示水平空间。需要注意的是，谷歌使用的是世界大地测量系统WGS84标准。如果使用的经纬度标准不同，可能会导致定位不准确。

以下是一些基于经纬度定位区域的方法：
- 使用地图上的辅助工具。
- 搜索主要城市的经纬度信息：可以访问 http://www.gorissen.info/Pierre/maps/googleMapLocation.php ，通过直接在谷歌地图上点击来定位点；或者在主谷歌地图网站（ http://maps.google.com/ ）上开启实验室功能，在屏幕左下角的“Map Labs”中找到一些经纬度辅助工具；也可以访问 http://www.realestate3d.com/gps/latlong.htm 搜索每个城市的数据。

当确定好经纬度后，可以更新地图选项的 center 属性，以反映地图的中心位置，并调整缩放级别，直到达到满意的效果。例如：

var mapOptions = {
    center: new google.maps.LatLng(45.52, 0),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

5. 地图类型

谷歌地图提供了多种地图类型，以下是一些常用的基本地图类型：
| 地图类型 | 描述 |
| ---- | ---- |
| google.maps.MapTypeId.ROADMAP | 显示谷歌地图的正常默认2D图块 |
| google.maps.MapTypeId.SATELLITE | 显示卫星摄影图块 |
| google.maps.MapTypeId.HYBRID | 显示摄影图块和突出特征（如道路、城市名称等）的图块层的混合 |
| google.maps.MapTypeId.TERRAIN | 显示用于展示海拔和水域特征（如山脉、河流等）的物理地形图块 |

6. 添加标记和事件

在创建好谷歌地图后，我们可以进一步将数据以标记和事件的形式集成到地图中。以下是在纽约市放置四个标记，并在点击标记时进行缩放和切换地图视图类型的步骤：

6.1 准备工作

在这一步骤之前，你应该已经使用JS API创建过谷歌地图。如果没有，请参考前面的“创建谷歌地图”部分。

6.2 编写JavaScript代码

function init() {
    // 定义基础状态的地图常量
    var BASE_CENTER = new google.maps.LatLng(40.7142, -74.0064);
    var BASE_ZOOM = 11;
    var BASE_MAP_TYPE = google.maps.MapTypeId.SATELLITE;
    var INNER_ZOOM = 14;
    var INNER_MAP_TYPE = google.maps.MapTypeId.ROADMAP;

    // 创建默认地图选项
    var mapOptions = {
        center: BASE_CENTER,
        zoom: BASE_ZOOM,
        mapTypeId: BASE_MAP_TYPE
    };
    var map = new google.maps.Map(document.getElementById("jsmap"), mapOptions);

    // 创建标记数据源
    var aMarkers = [
        {
            label: 'New York City',
            local: map.getCenter()
        },
        {
            label: 'Brooklyn',
            local: new google.maps.LatLng(40.648, -73.957)
        },
        {
            label: 'Queens',
            local: new google.maps.LatLng(40.732, -73.800)
        },
        {
            label: 'Bronx',
            local: new google.maps.LatLng(40.851, -73.871)
        }
    ];

    // 循环创建标记并添加事件
    var marker;
    for (var i = 0; i < aMarkers.length; i++) {
        marker = new google.maps.Marker({
            position: aMarkers[i].local,
            map: map,
            title: aMarkers[i].label
        });
        google.maps.event.addListener(marker, 'click', function (ev) {
            map.setZoom(INNER_ZOOM);
            map.panTo(ev.latLng);
            map.setMapTypeId(INNER_MAP_TYPE);
        });
    }

    // 添加地图点击事件，重置地图状态
    google.maps.event.addListener(map, 'click', function () {
        map.setZoom(BASE_ZOOM);
        map.panTo(BASE_CENTER);
        map.setMapTypeId(BASE_MAP_TYPE);
    });
}

运行此应用程序后，你将在屏幕上看到四个标记。点击标记时，地图将放大到该区域并切换视图类型；点击地图空白区域，地图将恢复到原始状态。

7. 自定义控件和重叠地图

此部分的目标是实践使用谷歌地图，整合之前所学的知识，并控制用户的操作行为，例如用户可以使用的控制器。我们将尝试创建一些未被官方支持和文档记录的行为，如锁定用户的平移区域。

以下是创建自定义控件和重叠地图的步骤：

7.1 创建HTML文件

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps Markers and Events</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAywwIFJPo67Yd4vZgPz4EUSVu10BLHroE&sensor=true"></script>
    <script src="./09.05.controls.js"></script>
  </head>
  <body onload="init();">
    <div id="mapIn"></div>
    <div id="mapOut"></div>
  </body>
</html>

7.2 使用CSS堆叠地图层

<style>
    html {
        height: 100%
    }
    body {
        height: 100%;
        margin: 0;
        padding: 0
    }
    #mapIn,
    #mapOut {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px
    }
</style>

7.3 创建JavaScript文件

在 09.05.controls.js 文件中添加以下代码：

function init() {
    var BASE_CENTER = new google.maps.LatLng(40.7142, -74.0064);

    // 创建外部地图
    var mapOut = new google.maps.Map(document.getElementById("mapOut"), {
        center: BASE_CENTER,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        disableDefaultUI: true
    });

    // 创建内部地图
    var mapIn = new google.maps.Map(document.getElementById("mapIn"), {
        center: BASE_CENTER,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        panControl: true
    });

    // 添加标记到上层地图
    var aMarkers = [
        {
            label: 'New York City',
            local: mapOut.getCenter()
        },
        {
            label: 'Brooklyn',
            local: new google.maps.LatLng(40.648, -73.957)
        },
        {
            label: 'Queens',
            local: new google.maps.LatLng(40.732, -73.800)
        },
        {
            label: 'Bronx',
            local: new google.maps.LatLng(40.851, -73.871)
        }
    ];
    var marker;
    for (var i = 0; i < aMarkers.length; i++) {
        marker = new google.maps.Marker({
            position: aMarkers[i].local,
            map: mapOut,
            title: aMarkers[i].label
        });
        google.maps.event.addListener(marker, 'click', onMarkerClicked);
    }

    function onMarkerClicked(ev) {
        mapIn.panTo(ev.latLng);
        $("#mapOut").fadeOut(1000);
    }

    // 添加内部地图点击事件
    google.maps.event.addListener(mapIn, 'click', function () {
        mapIn.panTo(BASE_CENTER);
        $("#mapOut").fadeIn(1000);
    });

    // 强制用户在外部地图上禁止平移
    google.maps.event.addListener(mapOut, 'center_changed', function () {
        mapOut.panTo(BASE_CENTER);
    });
}

加载HTML文件后，你将看到一个全屏且不可拖动的地图。点击标记时，地图将淡入到所选区域，此时可以拖动地图。再次点击内部地图的任意区域，地图将淡回到原始的上层地图。

总结

通过以上步骤，我们学习了如何使用谷歌地图API进行地理图表操作、获取API密钥、创建地图、使用经纬度定位、添加标记和事件，以及自定义地图控件和重叠地图。这些功能可以帮助我们创建出更加丰富和交互性强的地图应用。希望本文对你有所帮助，祝你在使用谷歌地图API的过程中取得成功！

谷歌地图API使用指南（续）

8. 事件处理机制深入分析

在前面添加标记和事件以及自定义控件和重叠地图的操作中，我们频繁使用了事件处理机制。下面深入分析谷歌地图API中事件处理的工作原理和优化方法。

8.1 事件监听函数

在谷歌地图API中，使用 google.maps.event.addListener 方法来监听事件。该方法接受三个参数：要监听的对象、事件类型（以字符串形式表示）和回调函数。例如，在添加标记事件时：

google.maps.event.addListener(marker, 'click', function(ev) {
    map.setZoom(INNER_ZOOM);
    map.panTo(ev.latLng);
    map.setMapTypeId(INNER_MAP_TYPE);
});

这里监听了标记的 click 事件，当标记被点击时，执行回调函数中的操作。

8.2 优化事件处理

为了减少内存占用和提高代码的可维护性，我们可以使用命名函数来替代匿名函数。例如：

function onMarkerClicked(ev){
    map.setZoom(INNER_ZOOM);
    map.panTo(ev.latLng);
    map.setMapTypeId(INNER_MAP_TYPE);
}

for(var i=0; i<aMarkers.length; i++){
    marker = new google.maps.Marker({
        position: aMarkers[i].local,
        map: map,
        title: aMarkers[i].label
    }); 
    google.maps.event.addListener(marker, 'click', onMarkerClicked);
}

这样，在每次循环中不会创建新的函数，而是使用同一个函数，减少了内存开销。

8.3 事件作用域

需要注意的是，在 init 函数内部定义的命名函数（如 onMarkerClicked ），其作用域仅限于 init 函数内部。这意味着该函数只能在 init 函数内部被调用，外部无法访问。这种作用域的限制有助于避免全局变量的污染，提高代码的安全性。

9. 标记创建与配置

标记是地图中用于标识特定位置的重要元素。在前面的示例中，我们已经介绍了如何创建标记，下面进一步介绍标记的配置选项。

9.1 基本标记创建

创建标记非常简单，只需要使用 google.maps.Marker 构造函数，并指定位置和地图即可。例如：

var marker = new google.maps.Marker({
    position: aMarkers[i].local,
    map: map,
    title: aMarkers[i].label
});

这里的 position 指定标记的位置， map 指定标记要显示的地图， title 是鼠标悬停在标记上时显示的提示信息。

9.2 其他配置选项

除了上述基本选项外，标记还有许多其他可选配置项。例如，可以设置标记的图标、动画效果等。以下是一个设置自定义图标的示例：

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(40.7142, -74.0064),
    map: map,
    title: 'New York City',
    icon: 'custom_icon.png'
});

这里的 icon 属性指定了自定义图标的路径。更多配置选项可以参考谷歌API文档。

10. 地图动画与过渡效果

在前面的示例中，我们使用了jQuery的 fadeIn 和 fadeOut 方法来实现地图的淡入淡出效果。下面进一步探讨地图动画和过渡效果的实现方法。

10.1 基本动画效果

谷歌地图API本身提供了一些基本的动画效果，例如 panTo 方法可以将地图平移到指定位置。但是，当同时进行多种操作（如切换地图类型、缩放和平移）时，动画效果可能会受到影响。例如，在前面自定义控件和重叠地图的示例中，使用 map.panTo 方法时，由于同时进行了其他操作，可能看不到实际的平移动画。

10.2 优化动画效果

为了实现平滑的过渡效果，可以考虑使用两个地图重叠的方法。在前面的示例中，我们已经实现了这种方法，通过切换两个地图的可见性来实现过渡效果。以下是一个简化的流程图，展示了这种方法的基本原理：

graph LR
    A[初始状态：显示外部地图] --> B[点击标记]
    B --> C[内部地图平移到点击位置]
    C --> D[外部地图淡出]
    D --> E[显示内部地图]
    E --> F[点击内部地图]
    F --> G[内部地图平移到中心位置]
    G --> H[外部地图淡入]
    H --> A[恢复初始状态]

通过这种方法，可以更好地控制动画效果，实现平滑的过渡。

11. 地图控件自定义

在自定义控件和重叠地图的操作中，我们已经对地图控件进行了一些自定义设置。下面详细介绍如何进一步自定义地图控件。

11.1 禁用默认控件

在创建地图时，可以通过设置 disableDefaultUI 属性为 true 来禁用默认的地图控件。例如：

var mapOut = new google.maps.Map(document.getElementById("mapOut"),{
    center: BASE_CENTER,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    disableDefaultUI: true
});

这样，地图将不会显示默认的缩放、平移等控件。

11.2 自定义控件显示

可以通过设置特定的属性来显示或隐藏某些控件。例如，设置 panControl 为 true 可以显示平移控件：

var mapIn = new google.maps.Map(document.getElementById("mapIn"),{
    center: BASE_CENTER,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    panControl: true
});

除了 panControl ，还可以设置 zoomControl （缩放控件）、 mapTypeControl （地图类型控件）、 streetViewControl （街景视图控件）、 overviewMapControl （缩略图控件）等。

11.3 自定义控件样式和位置

还可以通过CSS来自定义控件的样式和位置。例如，可以将缩放控件移动到地图的右上角：

<style>
    .gm-style .gmnoprint[title="Zoom in"] {
        top: 10px !important;
        right: 10px !important;
    }
    .gm-style .gmnoprint[title="Zoom out"] {
        top: 40px !important;
        right: 10px !important;
    }
</style>

这里通过选择器选择缩放控件，并使用 !important 来覆盖默认的样式。

12. 移动设备适配

随着移动设备的普及，地图在移动设备上的适配变得越来越重要。在前面创建地图的示例中，我们已经提到了视口信息的设置，下面进一步介绍移动设备适配的其他要点。

12.1 视口设置

视口设置可以帮助移动设备正确渲染地图。在HTML文件的头部添加视口元标签：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

这里的 initial-scale 设置初始缩放比例， user-scalable 设置用户是否可以缩放。

12.2 响应式设计

为了使地图在不同尺寸的移动设备上都能良好显示，可以使用响应式设计。例如，通过CSS设置地图容器的宽度和高度为百分比：

#jsmap {
    height: 100%;
    width: 100%;
}

这样，地图将根据设备屏幕的大小自动调整尺寸。

12.3 触摸事件处理

在移动设备上，用户主要通过触摸操作来与地图交互。因此，需要处理触摸事件。谷歌地图API会自动处理一些基本的触摸事件，如缩放和平移。但是，如果需要自定义触摸事件，可以使用 google.maps.event.addListener 方法监听触摸事件，如 touchstart 、 touchmove 、 touchend 等。