JS使用google地图API完成一个完整地图应用

最新推荐文章于 2024-08-16 17:41:49 发布

andrewleeeeee

最新推荐文章于 2024-08-16 17:41:49 发布

阅读量6k

点赞数

分类专栏： JS成品代码 Javascript

本文链接：https://blog.csdn.net/andrewleeeeee/article/details/12974969

版权

本文介绍了一个利用JavaScript及Google Maps API构建的完整地图应用，包括定位、添加标记、信息窗口、实时跟踪与清除跟踪功能。关键点在于使用`getCurrentPosition`方法进行定位，并通过`watchPosition`和`clearWatch`实现跟踪与停止跟踪。在应用中，需定义包含Google规定属性的对象，并将其传入API构造函数。`positionOptions`参数用于定制定位精度、超时时间和位置更新间隔。

摘要由CSDN通过智能技术生成

注意：

1.这是一个完整应用，分别实现了定位、添加标记、标记点开窗口、watchme和clearme实现及时跟踪开关、移动显示路径功能

2.关于js的地图API, geolocation最重要的是getCurrentPosition方法，其余两个为watchPosition(即时跟踪)，clearWatch(取消即时跟踪)

3.google地图API的使用方法，一般就是先定义对象，对象里有一些google定义的固定属性，然后将该对象传入google的构造函数里

4.说说第三个参数 positionOptions，它的选项和默认值为

var positionOptions =

{

enableHighAccuracy:false, //是否允许高精度定位，启动的话会耗电很大但是会确定的相对准确，否则如果只想知道用户大概位置就没必要打开

timeout:infinty, //超时处理，默认是无限大也就是没有处理，如果在指定时间（毫秒）内不能确定一个位置，就会调用错误程序

maximumAge:0 //报告当前位置的年龄，如果当前位置持续时间超过了设置时间，就会尝试获取新位置，否则就返回缓存已有对象

}

代码部分：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>google地图</title>

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>   //google地图api地址
<script>

// BEGIN 
// 计算两点距离成品代码，在起点的经度，纬度和终点的经度，纬度之间
//
function computeDistance(startCoords, destCoords) {
var star