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

最新推荐文章于 2026-06-17 11:03:10 发布

原创最新推荐文章于 2026-06-17 11:03:10 发布 · 5.6k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#google地图 #离线 #googleMap api v3 #箭头 #圆

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

最近因为开发的需要，要做一个离线的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="mapfiles/mapapi_3.12.15.js"></script>
<script type="text/javascript">
  function LocalMapType() {}
  LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
  LocalMapType.prototype.maxZoom = 10;   //地图显示最大级别
  LocalMapType.prototype.minZoom = 3;    //地图显示最小级别
  LocalMapType.prototype.name = "本地数据";
  LocalMapType.prototype.alt = "显示本地地图数据";
  LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
      var img = ownerDocument.createElement("img");
      img.style.width = this.tileSize.width + "px";
      img.style.height = this.tileSize.height + "px";
      //地图存放路径
       var strURL = "maptile/mapabc/";
      strURL += zoom + "/" + coord.x + "/" + coord.y + ".png";

      img.src = strURL;
      return img;
  };
  var localMapType = new LocalMapType();
  
  var map;
  var geocoder;
  
  function initialize() {
    var myLatlng = new google.maps.LatLng(30.58108413,114.31620010);//定位
    var myOptions = {
      center: myLatlng,
      zoom: 4,
      streetViewControl: false,
      mapTypeControlOptions: {
            mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.HYBRID,
            google.maps.MapTypeId.SATELLITE,
            google.maps.MapTypeId.TERRAIN,
            'locaMap' ]  //定义地图类型
        }
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    
    map.mapTypes.set('locaMap', localMapType);   //绑定本地地图类型
     map.setMapTypeId('locaMap');    //指定显示本地地图
    
    //标记
    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
        draggable:true,
        title:"Hello World!"
    });
    
    //提示信息
    var infowindow = new google.maps.InfoWindow(
        { content:"latlng:" + marker.getPosition().toString(),
          size: new google.maps.Size(50,50)
        });

	//绑定事件
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent("latlng:" + marker.getPosition().toUrlValue(6));
      infowindow.open(map,marker);
    }); 
  }
  
 </script>
</head>
<body onload="initialize()">
   <div id="map_canvas" style="width: 700px; height: 500px"></div>
</body>

</html>

这上面就是一个很简单的离线google地图的使用范例，上面的范例中给出了标记，而且点击标记会给出提示信息。如何有什么疑问的话，可以好好研究一下api，https://developers.google.com/maps/documentation/javascript/maptypes#CustomMapTypes这个是google提供的开发文档。队友google地图的离线很多功能都是有限的，因为很多功能是需要在线加载google的库文件的。目前对于离线google地图我就研究到这里，如果有同学找到了更强大的功能可以一起分享。

下面我们看看如何使用google地图标记除以一个点为中心自定义半径的圆，并将在范围内的数据显示出来的效果，并且在两个标记点画出一个单箭头的直线连接起来计算出两个标记点之间的距离。这些在离线地图中是无法使用的，原因已经说过了。所以要使用以下功能需要在线使用。因为使用在线的api就没有什么需要注意的了。我在这里直接给出例子，在例子代码中给出了响应的重要代码的说明。

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
    </style>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script> 
	<script type="text/javascript" src="mapDemo.js"></script>
    <script>
	var myLatlng = new google.maps.LatLng(30.58108413,114.31620010);//定义一个坐标点
	var point = new google.maps.LatLng(30.58108413,114.21620010);//定义第二个坐标点

	var map;//声明地图
	var cityCircle;//声明圆

	function initialize() {//页面加载执行方法
		

		var mapOptions = {//设置顶图显示
		  zoom: 12,//缩放级别
		  center: myLatlng,//中心地点
		  mapTypeId: google.maps.MapTypeId.ROADMAP,//显示模型，这个模型有多种，在上面的例子中已经给出
		}

		map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);//生成地图对象

		var marker = new google.maps.Marker({//第一个标记
			position: myLatlng,
			title:"Hello World!",
			map:map
		});

		var marker1 = new google.maps.Marker({//第二个标记
			position: point,
			map: map,
			title:"to"
		});


		//定义圆的属性
		var circle = {
		  strokeColor: "#FF0000",
		  strokeOpacity: 0.8,
		  strokeWeight: 2,
		  fillColor: "#FF0000",
		  fillOpacity: 0.35,
		  map: map,
		  center: myLatlng,//中心
		  radius: 10000//半径
		};
		cityCircle = new google.maps.Circle(circle);

		//计算两个标记之间的距离
		var distance = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), marker1.getPosition());
		
		var lineCoordinates = [//画直线
		  myLatlng,
		  point
		];

		var lineSymbol = {
		  path: google.maps.SymbolPath.FORWARD_OPEN_ARROW//google给定的预定于图标，可以换成自己的图标
		};

		var line = new google.maps.Polyline({
		  strokeColor: "#FF0000",
		  strokeOpacity: 1.0,
		  strokeWeight: 2,
		  path: lineCoordinates,
		  icons: [{
			icon: lineSymbol,//给直线添加箭头
			offset: '100%'
		  }],
		  map: map
		});
	}

/**
下面是自定义的计算两个标记之间距离的方法，可以自己根据需求写
*/
var EARTH_RADIUS = 6371;
function rad(d)
{
    return d * Math.PI/ 180.0;
}

function getDistance(lat1, lng1, lat2, lng2)
{
    var radLat1 = rad(lat1);
    var radLat2 = rad(lat2);
    var a = radLat1 - radLat2;
    var b = rad(lng1) - rad(lng2);
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
    Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    s = s * EARTH_RADIUS;
    s = Math.round(s * 10000) / 10000;
    return s;
}





  </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>

以上如果有不能正常显示的，可以将相关代码用到百度搜索，在下个文中，我会更加详细记录我的开发经历。
文中提到的文件下载路径http://download.csdn.net/detail/kyunchen/6624675，将上面的dem的例子和解压的文件放在一起就可以使用。如有疑问请留言。

说明：由于瓦片太大，无法上传，需要的同学可以给我留言。我也会在csdn上传瓦片下载的工具。下载地址：http://download.csdn.net/detail/kyunchen/6624813

过了这么久了，我看见这个资源上面的评论说完全不能下载，我突然想到我还是说明一下使用方法：在源码中有一个conf.properties文件，修改这个文件中的zoom表示你需要下载的瓦片的级别（1-13，多个用“，”分隔）。downloadDir表示存放的目录。leftTopLnglat这个参数表示你需要地图的左上角的经纬度。rightBottomLnglat表示你需要地图的右下角的经纬度。修改之后运行aatest下面的Test.java文件

如果不知道怎么计算经纬度的，可以使用“地图下载器”上面的坐标去获取经纬度。