<%@ 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="width: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{
width:850px;
height:450px;
border:1px solid gray
}
</style>
这里设置地图展示时宽度及样式
转载于:https://www.cnblogs.com/flytogalaxy/p/7659656.html
