关于查询区域标注区域总结 

<%@ 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>
这里设置地图展示时宽度及样式
posted @ 2017-10-13 09:57  夜西门吹雪孤城花满楼  阅读(159)  评论(0)  编辑  收藏  举报