您的位置：首页 > 数据库

基于JDBC从数据库中读取数据，在百度地图批量标注地点

2017-10-18 22:00 537 查看

基于JDBC从数据库中读取数据，在百度地图批量标注地点

一、相关技术

JSP，JDBC，JSON，JS，百度地图API

二、基于JDBC从数据库读取数据

见“JSP基于JDBC操作MSSQL2008数据库”

三、JS读取JAVA的变量值

var ls_City = '<%=lsCity%>';

四、JSON字符串转换为JSON对象

var objRecords1 = eval("(" + ls_City + ")");//后台数据json格式

五、显示地图

基于ECharts+百度地图开发散点扩散图

六、地图标注

var objRecords = eval("(" + ls_City + ")");//后台得到的数据包含经纬度，json格式的

var points = new Array();

for ( var i = 0; i < objRecords.length; i++) {

var marker = new BMap.Marker(new BMap.Point(objRecords[i].X, objRecords[i].Y));//创建标注对象

points.push(marker);

}

for ( var i = 0; i < objRecords.length; i++) {

map.addOverlay(points[i]);//在地图上批量标注

}

七、全部代码

在地图上批量标注

html {
height: 100%
}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
height: 100%;
margin: 0px;
padding: 0px;
}
#menu {
padding: 5px 0px 0px 0px;
width: 100%;
height: 7%;
}
#main {
width: 100%;
float: left;
position: fixed;
height: 87%;
}

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=**********************">
</script>

下载代码

八、运行结果

九、备用例程

1、准备数据集jsp文件，out.jsp
<%@page contentType="text/plain; charset=UTF-8"

language="java"

import="java.io.*,java.net.*,java.util.*"

buffer="8kb"

session="false"

autoFlush="true"

%>

<%

String jsonData="{data:[{id:200901,name:'name1'},{id:200902,name:'name2'},{id:200903,name:'姓名3'},{id:200904,name:'姓名4'},{id:200905,name:'姓名5'}]}";

//out.clear();

out.write(jsonData);

%>

2、js接收数据方式

(1)$.ajax(option)方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>test</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<script type="text/javascript" language="javascript" src="js/jquery.js"></script>

<script type="text/javascript">

function getOut(){

var s='';

$.ajax({

type:'get',//请求方式

url:'out.jsp?id='+Math.random(), // AJAX HTTP请求接口

data:'',//提交到服务器接口的参数比如'{cid:0405}'，结果为out.jsp?cid=0405格式

dataType:'json',//请求类型为json, 更多见jquery doc文档

timeout:7000,//请求超时后停止请求

success: function(json){

var d=json.data;

$.each(d,function(i){

s+=('<p>id:'+d[i].id +' | name:'+d[i].name+'</p><hr/>');

});

$('#out').html(s);}});

}

</script>

</head>

<body style="margin:20px;text-align:center;background:#E5E5E5;">

<input type="text" name="getdata" onclick="getOut()"/>

<div id="out">

</div>

</body>

</html>

(2)$.getJSON()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<%@ page language="java" contentType="text/html; charset=utf-8"%>

<head>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script>

function showStudent(){

var s='';

$.getJSON("out.jsp?id="+Math.random(),function(json){

var d=json.data;

for(var i=0;i<d.length;i++){

s+=('<p>id:'+d[i].id +' | name:'+d[i].name+'</p><hr/>');

}

$('#content').html(s);

});

}

</script>

</head>

<body>

<input type="button" value="获取学院信息" onclick="showStudent()" />

<div id="content"></div>

</body>

</html>

3、在百度地图上标注

//从数据库查询数据，json格式

var map = new BMap.Map("l-map");

var records = eval(${results});//后台得到的数据包含经纬度，json格式的

var points = new Array();

for(var i=0;i<records.length;i++){

points.push(new BMap.Point(records[i].longitude,records[i].latitude));//创建点对象

}

map.centerAndZoom(point, 15); //初始化地图

map.enableScrollWheelZoom();

map.addControl(new BMap.NavigationControl());

for(var i=0;i<points.length;i++){

map.addOverlay(points[i]);

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航