百度地图之WEB项目案例-工程管理

1.1     地图案例-WEB项目-工程管理

        填写工程地址时，引用百度地图的关键字输入提示功能，详细的地址记不住，只要输入相应的关键字，就能自动帮你联想出来，还帮你在地图上标识出来，非常的人性化。

        demo网址：http://lbsyun.baidu.com/jsdemo.htm#a6_2

1.  先把AK导入进去，一定要注意位置

<script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=tUBykYbtaXg2yl1B8n2Ti4LTLB48Uy8K"></script>

 

2.  拷入demo里的3个div

这个是地图展示的div:

<div id="l-map"style="width: 565px;height: 300px;border: 1px solid red"></div>

这个是隐藏的百度地图的一些信息：

<div id="searchResultPanel"style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

  

这个是用来搜索的div：

    <div class="form-group">

        <label class="col-sm-3control-label">地址搜索</label>

        <div class="col-sm-7">

            <input type="text"id="suggestId"class="form-control" maxlength="19"

                placeholder="地址搜索" check-type="required"required-message="请填写工程地址。">

        </div>

</div>

 

3.  拷入script里的代码

重点代码：

     var ac = new BMap.Autocomplete(    //建立一个自动完成的对象

               {"input" :"suggestId"

               ,"location" : map

      });

var pp = local.getResults().getPoi(0).point;   //获取第一个智能搜索的结果

获取地址：

local.getResults().getPoi(0).address

 

获取经度纬度：

    pp.lng;

    pp.lat;

 

4.  工程分布页面，使用ajax请求后面的工程信息，取到经度纬度后，生成point，展示在地图上

// 百度地图API功能

   var map = new BMap.Map("allmap");

   map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);

   map.enableScrollWheelZoom();

   var markers = [];

   $(function(){     

      $.get("/project/projectAreaList",function(data){        

         for (var i = 0; i < data.length; i++) {

              pt = new BMap.Point(data[i].lng, data[i].lat);

              markers.push(newBMap.Marker(pt));

         }

         var markerClusterer = new BMapLib.MarkerClusterer(map,{markers:markers});

      })     

   })

5.  可能出现的问题：自动关联被遮盖的问题

 

.tangram-suggestion-main {z-index: 9999999999;}