调用百度地图

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> 
<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>

猜你喜欢