百度地图API根据数据库经纬度显示多个标注点并去除百度地图logo

最新推荐文章于 2023-08-31 13:00:54 发布

夜空中最壮的星

最新推荐文章于 2023-08-31 13:00:54 发布

阅读量4.4k

点赞数 2

分类专栏： it 文章标签： java ajax 百度API marker标注点

本文链接：https://blog.csdn.net/weixin_40463857/article/details/80395844

版权

这篇博客介绍了如何通过Ajax连接后台Servlet，获取经纬度数据，将数据转换为JSON数组，并在百度地图上动态显示多个marker标注点。同时，博主分享了如何实现标注点动态效果，并表达了希望与同行交流学习的愿望。

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

<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<%int ids = 0; %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/login1.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.treeview.css" />
<link rel="stylesheet" href="css/screen.css" />

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.treeview.js" type="text/javascript"></script>
<script language="javascript" src="js/pcasunzip.js" charset="utf-8"></script>


<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}

.anchorBL{display:none;}

//去掉百度左下角logo添加这一句样式即可

</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.4.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">

//定义一个树状图的数组
var the_tree_arr = ([1,2,3,[1,2,3]],2,3);
function test(){
for(var i=0;i<the_tree_arr.length;i++){
alert(the_tree_arr[i]);
}
}
$(function() {

//alert("*********");
test();

//实现树状图切换显示的功能
$("#browser").treeview();

//添加树的节点
$("#add").click(function() {
var branches = $("<li><span class='folder'>New Sublist</span><ul>" +
"<li><span class='file'>Item1</span></li>" +
"<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
$("#browser").treeview({
add: branches
});
branches = $("<li class='closed'><span class='folder'>New Sublist</span><ul><li><span class='file'>Item1</span></li><li><span class='file'>Item2</span></li></ul></li>").prependTo("#folder21");
$("#browser").treeview({
add: branches
});
});
$("#browser").bind("contextmenu", function(event) {
if ($(event.target).is("li") || $(event.target).parents("li").length) {
$("#browser").treeview({
remove: $(event.target).parents("li").filter(":first")
});
return false;
}
});
})

</script>

<style type="text/css">
head{

font-family: "华文细黑";
width: 100%;
background-size: 100%;
}
#top{
width: 100%;
height:70%
font-family: "华文细黑";
width: 100%;
height:auto;
background-size: 100%;
}
#left{
width: 19.85%;
height: 160px;
float: left;
margin-left: 0;
}
.left-down{
width: 19%;
height: 54%;
float: left;
margin-left: 0;
margin-top: 5px;
}
.foot{
width:100%;
height: 200px;
margin-top: 50px;
margin-bottom: 20px;
float: left;
}

.foot p{
color:#AAAAAA;
text-align:center;
font-size:20px;
letter-spacing:1px;
}

.foot a{
color:white;
text-decoration:none;
}
.foot a:hover{
text-decoration:underline;
}
</style>
</head>
<body οnlοad="getnow()">
<header>
<div class="pic">

</div>
<div class="TiShi"><span id="timeSpan">管理员您好</span>，欢迎来到隧道施工安全智能监测系统</div>
<div class="address">您现在的位置：<a href="index.jsp" target="_parent" ><span style="font-size: 20px;">隧道施工安全智能监测系统</span></a> > 项目地图界面</div>
</header>

<div id="top">

<div class="Map" id="baiduMap" style="width:79.8%;height:75%;border:#ccc solid 1px;right: 0; bottom: 0; float: right"> </div>
<script type="text/javascript">
var markerAll = [];

var Map = {};

$(document).ready(function (){