关于google地图api3的离线和在线开发（画带箭头的直线，指定范围，搜索，计算距离）

本文链接：https://blog.csdn.net/Kyunchen/article/details/17003291

本文总结了使用Google Maps API v3进行离线和在线开发的经验，包括如何加载离线地图、创建带箭头的直线、设置地图范围、搜索和计算距离等。提供了离线地图开发的关键步骤，强调了main.js文件和地图瓦片下载的重要性。同时，指出在线模式下可实现更多功能，如绘制圆和显示范围内的数据。附有示例代码和下载资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近因为开发的需要，要做一个离线的google地图。并且能够加载google地图的一些特效。例如：地图的标记，计算距离，获取标记的经纬度，画带有箭头的直线，获取指定范围的数据等等。在这里我总结了很多开发前辈的技术和开发要点，并将最新的apiv3做了总结写在这里，能够给有需要的帮助。

在这边文章中会分为两部分来总结google地图的开发。第一部分只是包含简单的离线google地图的使用和google地图离线使用简单的标记操作。第二部分将总结出各种在google api v3中的一些例子，并做简单说明，记录这些的意义在于说不定哪天我忘记了就可以回过头来看看。

第一部分：google地图的离线使用和google地图瓦片的下载（下载工具，中国地图3-14级别的瓦片）。在说道如何使用离线google地图其实网上还是有很多资料的，只是大部分的资料都没有告诉我如何才能正确使用或者如何才能获得最大的开发灵活度。

要想使用google离线地图就必须要获取所有的google地图需要加载的js文件，这个听起来有点吓唬人（因为我们根本不知道有哪些是必须的），但是有一个js是一定不能缺少的，就是能够指引js找到google地图加载的main.js文件。

<script type="text/javascript" src="mapfiles/mapapi_3.12.15.js"></script>

这个js文件我会在附件中提供下载。现在有了这个js文件，我们还需要什么呢？我们还需要很多google地图加载需要的js文件，其实这个会包含在一个文件夹中，使用火狐浏览器可以下载下来的（mapfiles），附件中也有下载。mapapi_3.12.15.js这个文件你可以随意放置，但是你改变位置以后在引用的时候写上正确的路径就可以了。当前面两步完成之后我们就可以写离线的google地图的demo了。实例中的LocalMapType就是定义自定义的地图，在getTile中的img.src就是我们自己下载的google地图瓦片保存的位置。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
<title>Google Maps</title>
<script type="text/javascript" src="mapfi