<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; %> <c:set var="ctx" value="<%=basePath %>"/> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>管理员列表页面</title> <script type="text/javascript" src="<%=request.getContextPath()%>/easyUi/jquery.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/easyUi/jquery.easyui.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dpRMsClGWtxAzgjYc9aswy9j"></script> <script type="text/javascript"> var map; $(function(){ map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(107.631275,33.1553419), 4); map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})); map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 $("body").keydown(function(event) { if (event.which == 13) { getBoundary(); } }); }); function getBoundary(){ var bdary = new BMap.Boundary(); var name = document.getElementById("districtName").value; bdary.get(name, function(rs){ //获取行政区域 map.clearOverlays(); //清除地图覆盖物 var count = rs.boundaries.length; //行政区域的点有多少个 for(var i = 0; i < count; i++){ var ply = new BMap.Polygon( rs.boundaries[i], { strokeWeight: 2, //虚线的像素度 strokeColor: "#ff0000" //颜色 }); //建立多边形覆盖物 map.addOverlay(ply); //添加覆盖物 map.setViewport(ply.getPath()); //调整视野 } }); } </script> <style type="text/css"> body{ font-size:13px; margin:5px } #container{ width:850px; height:450px; border:1px solid gray } </style> </head> <body> <div id="container"></div> <br/> 输入省、直辖市或县名称：<input type="text" id="districtName" style="80px" value="重庆市"> <input type="button" onclick="getBoundary()" value="获取轮廓线"> </body> </html>
由于jsp页面的加载方式是从上自下的加载方式，所以这里使用jqery的方式等在页面加载完毕后在加载JavaScript的方法【$(function(){ })】
$("body").keydown(function(event) { f (event.which == 13) { getBoundary(); }
这里使用键盘绑定事件，当标签<body></body>内执行键盘事件event.which==13及enter键即执行getBoundary()方法。
<style type="text/css">
body{
font-size:13px;
margin:5px
}
#container{
850px;
height:450px;
border:1px solid gray
}
</style>
这里设置地图展示时宽度及样式