JS方式实现百度地图加载数据库中的坐标并实现动态刷新

最新推荐文章于 2023-01-11 16:08:30 发布

magvwiz

最新推荐文章于 2023-01-11 16:08:30 发布

阅读量1.3w

点赞数

文章标签：百度地图动态加载数据库 js javascript

本文链接：https://blog.csdn.net/magvwiz/article/details/41822181

版权

本文介绍了一个JavaScript实现的示例，展示如何将数据库中的坐标数据加载到百度地图上，并实现动态刷新。在1分钟内，程序会每10秒检查数据库是否有新的坐标点，如果有则在地图上添加新的标记和轨迹。代码主要使用了ExtJS3和百度地图API，实现了地图的初始化、获取坐标数据、动态更新等功能。

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

整个Demo要实现的目标就是在百度地图上首先加载数据库中的坐标数据，加载完毕1分钟后，开始每隔10秒扫描一下数据库，如果有新的坐标点，就动态添加到地图上。这个功能不难，但是百度了很久也没找到个合适的，没办法，只能自己写了。因为本人JS水平非常有限，做前台的时候只用过ExtJS3，对现在比较流行的JQuery什么的没有研究，所以暂时先用Ext3.0.0来实现，虽然办法比较笨，毕竟也算是把功能实现了，希望有人能给个更好的解决方案。

下面开始上代码：index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak='你的ak，不用加单引号'"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/changeMore.js"></script>
<title>百度地图测试</title>
<style type="text/css">
body, html, #testMap{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href=