//后台党法主要是参坐标到前台,业务的坐标
@RequestMapping("/gotoMap")
public String gotoMap(Model model){
List<xxx> list=this.xxxService.getAll();
List<MapJson> mapList = new ArrayList<MapJson>();
for (XXX XXX: list) {
if(XXX!=null){
MapJson mapJson = new MapJson();
...//各种参数
mapJson.setIsOpen(0);
mapJson.setUrl("http://www.baidu.com");
mapList.add(mapJson);
}
}
JSONArray json = JSONArray.fromObject(mapList);
System.out.println(json.toString());
model.addAttribute("xxx", json);
return "jsp路径";
}
前台页面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<jsp:useBean id="dateValue" class="java.util.Date"/>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图</title>
<style type="text/css">
html{
height:100%
}
body{
height:100%;
margin:0px;
padding:0px
}
#container{
height:100%
}
.head{
width: 95%;
height: 50px;
border: 1px solid darkgray;
text-align: center;
margin: 0 auto;
margin-top: 20px;
background-color: white;
}
.head .hd{
font-size: 20px;
padding-top: 20px;
display: inline;
padding-right: 30px;
line-height: 50px;
}
.head .neir{
font-size: 20px;
padding-top: 20px;
display: inline;
padding-left: 10px;
line-height: 50px;
}
.cont{
width: 100%;
margin: 0 auto;
margin-top: 30px;
}
.mui-ellipsis span{
padding-left: 12px;
}
.tjbtn{
display: block;
width: 95%;
height: 45px;
margin: 0 auto;
}
.iconfont{
font-size: 20px;
}
.footer {
width:100%;
height:50px;
line-height:50px;
background-color:#3394c7;
position:fixed;
bottom:0px;
left:0px;
}
.bh{
width: 28%;
height: 100%;
background-color: mediumpurple;
vertical-align:middle;
text-align: center;
padding: 10px 0;
display: inline-block;
/* border-right: 50px solid transparent;
border-top: 100px solid ;*/
}
.mui-ellipsis{
display: block;
}
.mui-ellipsis span{
display: block;
float: left;
width: 50%;
}
.icon-shijian{
color: dodgerblue;
font-weight: bold;
}
.shijian{
color: dodgerblue;
font-weight: bold;
font-size: 16px;
}
input[type='text'],textarea{
-webkit-user-select:auto !important;
-moz-user-select:auto !important;
user-select:auto !important;
}
.mui-icon-checkmarkempty{
font-size: 40px !important;
padding: 2px!important;
}
#con h1{
text-align: center;
}
/* tr{
border:none!important;
}
td{
border:none!important;
line-height: normal!important;
}*/
label{
text-align: left!important;
}
mui-input-row{
}
.mui-table-view-cell{
padding-left: 0!important;
padding-right: 0!important;
padding-bottom: 0!important;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=v4p1GWvxbq8cgMScSgYNmEODuiKrRHoy">
//v3.0版本的引用方式:src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
</script>
<script src="${ctx}/style/js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="${ctx}/back-system/page-style/js/jquery.tab.js"></script>
<script src="${ctx}/back-system/js/god_Core.js"></script>
<script src="${ctx}/back-system/page-style/js/jquery.js"></script>
<script src="${ctx}/back-system/page-style/js/My97DatePicker/WdatePicker.js"></script>
<script src="${ctx}/back-system/js/god_paging.js"></script>
<script src="${ctx}/back-system/style-public/select/select.js"></script>
<link href="${ctx}/back-system/page-style/layui/css/layui.css" type="text/css" rel="stylesheet" />
<script src="${ctx}/back-system/page-style/layui/layui.js" charset="utf-8"></script>
<script src="${ctx}/back-system/page-style/require/require.js"></script>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container");
// 创建地图实例
var point = new BMap.Point(121.17,31.90);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);
var str = '${lyxi}';//后台参数
var index = 0;
var data = [];
var markerArr= eval('(' + str + ')');
var lybzmc=new Array();
for(var i = 0;i<markerArr.length;i++){
lybzmc = markerArr[i].title;
p0 = markerArr[i].point.split("|")[0];
p1 = markerArr[i].point.split("|")[1];
content = markerArr[i].content;
if(content = null){
content = "";
}else{
content = markerArr[i].content;;
}
lyid = markerArr[i].lyid;
imagesrc = markerArr[i].imagesrc;
var marker = addMarker(new window.BMap.Point(p0, p1), i);
var sContent =
/* '<h3 style="margin:0 0 5px 0;padding:0.2em 0">' +lybzmc +*/
'<br><div ><img style="float:left ;margin:4px" width="140" height="225" src='+ imagesrc +'></div>'
+' <div style="margin-left:10px"><h3 style=" margin:0 0 5px 0;padding:0.2em 0">名称:</h3>'
+'<h3 style="margin:0 0 5px 0;padding:0.2em 0;color:red">'+lybzmc+'</h3>'
+ '<h3 style="margin:0 0 5px 0;padding:0.2em 0">地址:</h3>'
+'<h3 style="margin:0 0 5px 0;padding:0.2em 0">'+content+'号</h3>'
+ '<a style="color:blue" href="${ctx}/jbqk/edit?id='+lyid+'&flag=2" style="margin:0 0 5px 0;padding:0.2em 0">'+lybzmc+' </a><br><br>'
+'<button style="float:right" class="layui-btn layui-btn-sm layui-btn-normal" οnclick="toShowXq('+'"'+lyid+'"'+');">查看</button> </div>';
var opts = {
width : 380, // 信息窗口宽度
height: 280, // 信息窗口高度
title : '<h2><b>'+lybzmc+'<b></h2>', // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:""
}
addClickHandler(sContent,opts,marker);
}
function addMarker(point, index) {
var myIcon = new BMap.Icon(("http://api.map.baidu.com/img/markers.png"), new BMap.Size(23,27));
/* new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, -275)
}); */
var marker = new BMap.Marker(point,{icon:myIcon});
map.addOverlay(marker);
return marker;
}
function addClickHandler(sContent,opts,marker){
marker.addEventListener("click",function(e){
openInfo(sContent,opts,e)}
);
}
function openInfo(sContent,opts,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(sContent,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
function toShowXq(lyid){
window.location.href ="${ctx}/jbqk/edit?id="+lyid+"&flag=1";
}
</script>