百度地图API：获取经纬度并存储到文件

下载需积分: 10 | TXT格式 | 3KB | 更新于2024-09-13 | 142 浏览量 | 举报

本资源主要介绍如何利用百度地图API在HTML页面中获取经纬度并将其存储到文件中的过程。首先，页面结构包含一个`<div>`元素用于显示地图（id="container"），以及两个按钮，一个用于开始获取经纬度（"ȡ㹤"），另一个用于清除地图覆盖物和清空信息（"map.clearOverlays()"）。在JavaScript部分，关键代码如下： 1. 初始化地图：创建一个新的`BMap.Map`实例，并设置其容器为"container"，调用`map.centerAndZoom("ɳ", 10)`方法来设置初始地图视图，其中"ɳ"是地图的中心点坐标，10表示缩放级别。 2. 定义变量：`newpoint`用于存储单个经纬度点，`points`数组用于存储所有获取的经纬度，`polyline`用于创建路径线，`s`是字符串变量用于存储写入文件的内容。 3. `writeFile`函数：这是一个重要的辅助函数，它接收两个参数——文件名和文件内容，使用`Scripting.FileSystemObject`对象创建一个文本文件，写入内容后关闭文件，并弹出提示框确认写入成功。 4. `startTool`函数：这是用户触发获取经纬度的主要操作。如果API密钥有效（这里假设key==1），点击按钮后，这个函数会被触发。在这个函数中，按钮的背景颜色可能被改变以表明操作状态。当用户点击后，程序会尝试获取经纬度数据，并可能将其添加到`points`数组中，具体实现依赖于百度地图提供的API接口。这个资源的核心知识点包括： - 百度地图API的使用，特别是获取地图中心点经纬度和创建地图视图的方法。 - JavaScript中文件操作，通过`ActiveXObject`与操作系统进行交互，实现经纬度数据的读取和写入。 - 界面交互设计，如何通过按钮事件处理程序来启动地图获取经纬度的功能，并更新界面元素。通过这段代码，开发者可以了解到如何结合HTML和JavaScript在网页上集成百度地图功能，并能将获取到的经纬度数据持久化存储。这对于开发地理位置相关的Web应用或者需要跟踪地理信息的应用非常有用。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>长沙部分区地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:920px;height:520px;border:1px solid gray" id="container"></div>
<p><input id="startBtn" type="button" onclick="startTool();" value="开启取点工具" /><input type="button" onclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];" value="清除" /></p>
<div id="info"></div>
</body>
</html>

<script type="text/javascript">
var map = new BMap.Map("container"); // 创建Map实例
map.centerAndZoom("长沙", 10); // 初始化地图,设置中心点坐标和地图级别

var key = 1; //开关
var newpoint; //一个经纬度
var points = []; //数组，放经纬度信息
var polyline = new BMap.Polyline(); //折线覆盖物
var s=" ";

//写文件
function writeFile(filename,filecontent){
var fso, f, s ;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.OpenTextFile(filename,8,true);
f.WriteLine(filecontent);

下载后可阅读完整内容，剩余2页未读，立即下载