h5手机端嵌入百度地图并输入自己需要的坐标

最新推荐文章于 2024-04-03 17:58:25 发布

兔老大的胡萝卜

最新推荐文章于 2024-04-03 17:58:25 发布

阅读量1.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/nuoyuezuo/article/details/104019254

版权

前端专栏收录该内容

70 篇文章 1 订阅

订阅专栏

//后台党法主要是参坐标到前台，业务的坐标
@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('+'&quot;'+lyid+'&quot;'+');">查看</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>

兔老大的胡萝卜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
h5手机端嵌入百度地图并输入自己需要的坐标

//后台党法主要是参坐标到前台，业务的坐标@RequestMapping("/gotoMap") public String gotoMap(Model model){ List<xxx> list=this.xxxService.getAll(); List<MapJson> mapList = new ArrayList<...
复制链接

扫一扫