调用百度地图

最新推荐文章于 2024-02-22 11:28:10 发布

pergoods

最新推荐文章于 2024-02-22 11:28:10 发布

阅读量198

点赞数

分类专栏： jsp 文章标签：百度地图

本文链接：https://blog.csdn.net/pergoods/article/details/84916186

版权

jsp 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom

-------------jsp代码
<%-- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> --%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="zh-cn">
<head>

<title> 数据统计</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<jsp:include page="/component/publicpage/header.jsp"></jsp:include>
<script type="text/javascript" src="<%=basePath %>js/echarts.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XkofHhpAftEZdwus59xA55l80"></script> [color=red] [/color]
<script type="text/javascript" src="<%=basePath %>/js/TextIconOverlay.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/MarkerClusterer.js"></script>
<style type="text/css">
.anchorBL{display:none}
</style>
</head>
<body>

<form id="form2" class="query-list" method="post" action="" data-options="novalidate:true">
<table class="table-query">
<tbody>
<tr>
<th width="5%">房型</th>
<td >
<input id="housecodemap" name="housecodemap" type="text" class="easyui-combobox" value="${housecodemap}" style="width:10%" />
</td>
</tr>
</tbody>
</table>
</form>

<div id="allmap" style="height:530px; width:99%; margin-left: 10px;margin-right: 10px; margin-top: 10px; margin-bottom:10px; border: 0px solid red;"></div>

<script type="text/javascript">

</script>

</body>
</html>

<script>
$(function(){

$.ajax({
url:'<%=basePath%>selectServlet?codetable=houstTMap',
datatype:"json",
success:function(res)
{
$("#housecodemap").combobox({
editable:false,
valueField:'code',
textField:'name' ,
panelHeight:'auto',
data:JSON.parse(res).result
});
},
error:function(res)
{
alert(res.responseText);
}
});

doQuery();

//下拉框选中事件
$("#housecodemap").combobox({
onChange: function (n,o) {
var data_attr = n;
alert(data_attr);
window.location.href='<%=basePath %>houseinfo/gotoHouseMaptype.xhtml?id='+data_attr;
}
});
});

function doQuery(){
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point('111.31098109196083','30.73275781802591'), 15);
map.enableScrollWheelZoom(true);
map.setMapStyle({style:'normal'});
var markers = [];
var data_info = ${unqualifiedhotmapData};
for (var i = 0; i < data_info.length; i++) {
pt = new BMap.Point(data_info[i].lng, data_info[i].lat);
var marker = new BMap.Marker(pt);
var content = "小区:"+data_info[i].title+"<br/>房价:"+data_info[i].price+"<br/>地址:"+data_info[i].address+"<br/>房型介绍："+data_info[i].remark
addClickHandler(content, marker);
markers.push(marker);
}
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
var opts = {
width : 250, // 信息窗口宽度
height: 150, // 信息窗口高度
title : "房屋信息" , // 信息窗口标题
enableMessage:false //设置允许信息窗发送短息
};
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
}
}

</script>

pergoods

关注

0
点赞
踩
0

收藏

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

http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom-------------jsp代码数据统计 [color=red] [/color] .anchorBL{display:none} ...
复制链接

扫一扫