默认启用(可不写) map.enableKeyboard(); //启用键盘上下左右键移动地图 } //地图控件添加函数

<!DOCTYPE html>

<html>

   <head>
       <meta charset="UTF-8">

       <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
       
        <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true">
       </script>
       <title></title>
       <style>
           /*处事网点*/

           #wrap {
               width: 1196px;
               height: 540;
               margin: auto;
               overflow: hidden;
           }

           #wrap div ._left {
               width: 281px;
               float: left;
               height: 339px;
               border-right: 1px solid #CCCCCC;
           }

           #wrap ul {
               width: 1196px;
               height: 50px;
               border-bottom: 1px solid #CCCCCC;
               border-top: 1px solid #CCCCCC;
               margin-bottom: 57px;
           }
           /*搜索框都市*/

           #input {
               width: 360px;
               height: 37px;
               margin-left: 51px;
           }
       </style>
    </head>
    <body>

       
       <div>
        <ul></ul>

           

           
           <div></div>
           <div>
               <input type="text" />

               <input type="button" value="搜索舆图" />
           </div>
           

       </div>

   </body>
   <script type="text/javascript">
       //创建和初始化舆图函数：
       function initMap() {
           createMap(114.025974, 22.546054); //创建舆图
           setMapEvent(); //设置舆图事件
           addMapControl(); //向舆图添加控件
       }
       //舆图搜索
       function searchMap() {
           var area = document.getElementById("input").value; //得到地区
           var ls = new BMap.LocalSearch(map);
           ls.setSearchCompleteCallback(function(rs) {
               if(ls.getStatus() == BMAP_STATUS_SUCCESS) {
                   var poi = rs.getPoi(0);
                   if(poi) {
                       createMap(poi.point.lng, poi.point.lat); //创建舆图(经度poi.point.lng,纬度poi.point.lat)
                       setMapEvent(); //设置舆图事件
                       addMapControl(); //向舆图添加控件
                   }
               }
           });
           ls.search(area);
       }
       //创建舆图函数：
       function createMap(x, y) {
           var map = new BMap.Map("dituContent"); //在百度舆图容器中创建一个舆图
           var point = new BMap.Point(x, y); //界说一其中心点坐标
           map.centerAndZoom(point, 12); //设定舆图的中心点和坐标并将舆图显示在舆图容器中
           window.map = map; //将map变量存储在全局
       }
       //舆图事件设置函数：
       function setMapEvent() {
           map.enableDragging(); //启用舆图拖拽事件，默认启用(可不写)
           map.enableScrollWheelZoom(); //启用舆图滚轮放大缩小
           map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
           map.enableKeyboard(); //启用键盘上下摆布键移动舆图
       }
       //舆图控件添加函数：
       function addMapControl() {
           //向舆图中添加缩放控件
           var ctrl_nav = new BMap.NavigationControl({
               anchor: BMAP_ANCHOR_TOP_LEFT,
               type: BMAP_NAVIGATION_CONTROL_LARGE
           });
           map.addControl(ctrl_nav);
           //向舆图中添加缩略图控件
           var ctrl_ove = new BMap.OverviewMapControl({
               anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
               isOpen: 1
           });
           map.addControl(ctrl_ove);
           //向舆图中添加比例尺控件
           var ctrl_sca = new BMap.ScaleControl({
               anchor: BMAP_ANCHOR_BOTTOM_LEFT
           });
           map.addControl(ctrl_sca);
       }
       initMap(); //创建和初始化舆图
   </script>
</html>

前端挪用百度API

，

秒客网

默认启用(可不写) map.enableKeyboard(); //启用键盘上下左右键移动地图 } //地图控件添加函数

相关文章