百度地图概览

最新推荐文章于 2022-10-13 16:24:18 发布

zengwenhe1987

最新推荐文章于 2022-10-13 16:24:18 发布

阅读量248

点赞数

分类专栏： java-web

本文链接：https://blog.csdn.net/qq_36357608/article/details/80962272

版权

java-web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}

#allmap {
height: 100%;
width: 100%;
overflow: hidden;
}

#result {
width: 100%;
font-size: 12px;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style: none;
}

dt {
font-size: 14px;
font-family: "微软雅黑";
font-weight: bold;
border-bottom: 1px dotted #000;
padding: 5px 0 5px 5px;
margin: 5px 0;
}

dd {
padding: 5px 0 0 5px;
}

li {
line-height: 28px;
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=Qq6Mmp9O1nKjyjd4j4ptn5kltwUVFtDn"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
var ctx = "${ctx}";
</script>
</head>
<body>


<div id="allmap"></div>

</body>
</html>
<style>
/* 去掉地图左下角的百度LOGO */
.BMap_cpyCtrl {
display: none;
}

.anchorBL {
display: none;
}
</style>

<script type="text/javascript">
var map = new BMap.Map('allmap');
map.centerAndZoom(new BMap.Point(119.404269, 34.916042), 6);//中心点经纬度，缩放级别4
map.enableDragging(); //启用拖拽
map.enableScrollWheelZoom(true);//启用滚轮放大缩小
//map.disableDragging(); //禁止拖拽

//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({
anchor : BMAP_ANCHOR_TOP_LEFT,
type : BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrl_nav);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({
anchor : BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrl_sca);
//创建检索信息窗口对象
var searchInfoWindow = new Array();
var marker=new Array();
var content ;
//获取数据库设备的经纬度显示在地图上
$.ajax({
url : ctx + "/compre/getCompreBasicinfoList",//接口地址
type : "post",
data : {},
dataType : "json",
success : function(data) {
for (var i = 0; i < data.length; i++) {
if(data[i].mapLng!=null&& data[i].mapLat!=null){
var address = data[i].provinces + data[i].city + data[i].town;
var compreNo=data[i].compreNo;
var compreName=data[i].compreName;
var transtime=data[i].transtime;
var data_info = [ [ data[i].mapLng, data[i].mapLat,
"编号：" + compreNo,"名称：" + compreName,"地址：" + address,
"投运时间：" + transtime] ];
//将标准添加到地图上
marker[i] = new BMap.Marker(new BMap.Point(data_info[0][0], data_info[0][1])); // 创建标注
map.addOverlay(marker[i]); // 将标注添加到地图中
content = data_info[0][2]+"<br>"+data_info[0][3]+"<br>"+data_info[0][4]+"<br>"+data_info[0][5]+"<br>";

//创建检索信息窗口对象
searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, content, {
title : "信息窗口", //标题
width : 250, //宽度
height : 100, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes : [ BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});

marker[i].addEventListener("click", (function(k) {
// js 闭包
return function() {
//map.centerAndZoom(point[k], 18);
//marker[k].openInfoWindow(info[k]);
searchInfoWindow[k].open(marker[k]);
}
})(i));

}
}
},
error : function(msg) {
alert("数据接收异常！");
}
});

/* /* function addClickHandler(content,marker[i]){
marker.addEventListener("click",function(e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
searchInfoWindow[i].open(point);
}
);
} */

var mapStyle = {
styleJson : [ {
"featureType" : "all",
"elementType" : "geometry",
"stylers" : {
"hue" : "#0e2c24",//214a3f
"saturation" : 50
}
}, {
"featureType" : "water",
"elementType" : "all",
"stylers" : {
"color" : "#afc8f5"
}
} ]
}
map.setMapStyle(mapStyle);
//判断兼容性
function checkhHtml5() {
if (typeof (Worker) === "undefined") {
if (navigator.userAgent.indexOf("MSIE 9.0") <= 0) {
alert("定制个性地图示例：IE9以下不兼容，推荐使用百度浏览器、chrome、firefox、safari、IE10");
}

}
}
checkhHtml5();
</script>

zengwenhe1987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图概览

&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;%@ include file="/WEB-INF/page/include/taglib.jsp"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HT
复制链接

扫一扫

专栏目录