首页 > 程序开发 > web前端 > HTML/CSS >

php百度地图api接入——页面html部分

2017-03-28

php百度地图api接入——页面html部分。

php百度地图api接入——页面html部分

页面html部分<pre class="brush:sql;"><!--地址选择-->
<div id="address_select_box" style="position: relative;background: #fff;">
   <div class="map" style="position: fixed;top: 0;left: 0;width: 640px;height: 400px;margin: 0 auto;">
      <!--<img src="images/map.jpg"/>-->
      <div id="allmap" style="width: 640px;height: 400px;overflow: hidden;margin: 0px;font-family:微软雅黑;"></div>
      <!--新增-->
      <div class="search">
         <form action="" method="">
            <input type="text" id="address_text" value="" class="input" placeholder="请输入地址"/>
            <span class="icon-search"></span>
         </form>
      </div>
      <!--新增-->
   </div>
   <div style="height:400px;width:640px;"></div>
   <div class="map_list">
      <ul>
         <li class="active">
            <div>
               <span class="icon-map-marker"></span>当前位置
            </div>
            <div>
               地址:定位中。。。
            </div>
         </li>
      </ul>
   </div>
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=key"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script>
   // 百度地图API功能
   var map = new BMap.Map("allmap");
   var point, marker, m_address;
 
   $(function(){
      navigator.geolocation.getCurrentPosition(translatePoint);//浏览器定位
   });
 
   //建立一个自动完成的对象
   var ac = new BMap.Autocomplete({
      "input" : "address_text",
      "location" : map
   });
   //鼠标点击下拉列表后的事件
   ac.addEventListener("onconfirm", function(e) {
      var _value = e.item.value;
      m_address = _value.province + _value.city + _value.district + _value.street + _value.business;
      setPlace();
   });
 
   //获取定位的经纬度
   function translatePoint(position){
      var dw_lng = position.coords.longitude;
      var dw_lat = position.coords.latitude;
      var dw_point = new BMap.Point(dw_lng, dw_lat);
      BMap.Convertor.translate(dw_point, 0, initMap);//转换坐标
   }
 
   //根据经纬度获取地址
   function setLocation(is_close_box){
      var geoc = new BMap.Geocoder();
      geoc.getLocation(point, function(rs){
         var _value = rs.addressComponents;
         m_address = _value.province + _value.city + _value.district + _value.street + _value.streetNumber;
         if (is_close_box==1)
         {
            set_address(point.lng, point.lat, m_address);
         }else
         {
            get_near(point.lng, point.lat, m_address);
         }
      });
   }
 
   //初始化地图
   function initMap(init_point){
      point = init_point;
      setLocation(0);
      map.centerAndZoom(point, 18);//地图显示
      marker = new BMap.Marker(point);//创建标注
      map.addOverlay(marker);
      map.enableScrollWheelZoom(); //可以鼠标滚动、缩放比例尺
      marker.enableDragging(); //可拖拽
      //拖曳标注点的位置
      marker.addEventListener("dragend", function(e){
         point = marker.getPosition();//获取marker的位置
         setLocation(1);
      });
   }
 
   //检索结果
   function setPlace(){
      map.clearOverlays();//清除地图上所有覆盖物
      function myFun(){
         point = local.getResults().getPoi(0).point;//获取第一个智能搜索的结果
         setLocation(1);
      }
      //智能搜索
      var local = new BMap.LocalSearch(map, {
         onSearchComplete: myFun
      });
      local.search(m_address);
   }
 
   //获取附近的商家信息
   function get_near(lng, lat, address){
      $.ajax({
         type:&#39;post&#39;,
         url:"{:U(&#39;User/addressSelect&#39;)}",
         data:{lng:lng, lat:lat, address:address},
         dataType:"html",
         success:function(obj){
            $(".map_list").find(&#39;ul&#39;).html(obj);
         }
      });
   }
 
   function set_address(lng, lat, address) {
      $("#lng").val(lng);
      $("#lat").val(lat);
      $("#address").val(address);
   }
</script>
<!--地址选择end--></pre><pre class="brush:sql;"><pre class="brush:sql;">User/addressSelect方法</pre></pre><pre class="brush:sql;">public function addressSelect()
{
    $lng = $_POST[&#39;lng&#39;];
    $lat = $_POST[&#39;lat&#39;];
    $address = $_POST[&#39;address&#39;];
 
    $this->assign(&#39;lng&#39;, $lng);
    $this->assign(&#39;lat&#39;, $lat);
    $this->assign(&#39;address&#39;, $address);
 
    $list = get_near($lat, $lng);
    $this->assign(&#39;list&#39;, $list);
 
    $this->display(&#39;index/address_select&#39;);
}</pre><pre class="brush:sql;"><pre class="brush:sql;"><pre class="brush:sql;">User/addressSelect视图
</pre></pre></pre><pre class="brush:sql;"><li class="active" data-lng="{$lng}" data-lat="{$lat}" data-address="{$address}">
   <div>
      <span class="icon-map-marker"></span>当前位置
   </div>
   <div>
      地址:{$address}
   </div>
</li>
<foreach name="list" item="item">
<li data-lng="{$item.info.location.lng}" data-lat="{$item.info.location.lat}" data-address="{$item.info.address}">
   <div>
      <span class="icon-map-marker"></span>{$item.info.name}
   </div>
   <div>
      地址:{$item.info.address}
   </div>
</li>
</foreach>
<script>
   $(function(){
      $(".map_list ul>li").bind(&#39;click&#39;, function(){
         var lng = $(this).attr(&#39;data-lng&#39;);
         var lat = $(this).attr(&#39;data-lat&#39;);
         var address = $(this).attr(&#39;data-address&#39;);
         set_address(lng, lat, address);
      });
   });
</script></pre><pre class="brush:sql;"><pre class="brush:sql;"><pre class="brush:sql;"><pre class="brush:sql;">//计算经纬度距离</pre></pre></pre></pre><br>function get_distance($lat1, $lng1, $lat2, $lng2){    <br>//deg2rad()函数将角度转换为弧度    <br>$radLat1 = deg2rad($lat1);    <br>$radLat2 = deg2rad($lat2);    <br>$radLng1 = deg2rad($lng1);    <br>$radLng2 = deg2rad($lng2);    <br>$a = $radLat1-$radLat2;    <br>$b = $radLng1-$radLng2;    <br>$s = 2*asin(sqrt(pow(sin($a/2),2)+cos($radLat1)*cos($radLat2)*pow(sin($b/2),2)))*6378.137*1000;    <br>return $s;<br>}<br>//根据经纬度检索附近商家信息<br>function get_near($lat, $lng){    <br>$url = &#39;http://api.map.baidu.com/place/v2/search?query=小区$公司&location=&#39;.$lat.&#39;,&#39;.$lng.&#39;&radius=1000&output=json&ak=7NpVlxZOSqNn1CYT4hmvC8VP&page_size=15&#39;;    <br>$res = file_get_contents($url);    <br>$arr = ((array)json_decode($res, true));    <br>$list = $arr[&#39;results&#39;];    <br>$distance_arr = array();    <br>foreach ($list as $k=>$v) <br>{        <br>$distance = get_distance($lat, $lng, $v[&#39;location&#39;][&#39;lat&#39;], $v[&#39;location&#39;][&#39;lng&#39;]);        <br>$list[$k][&#39;distance&#39;] = $distance;        <br>$distance_arr[$k] = $distance;    <br>}<br>//根据距离由近及远降序<br>array_multisort($distance_arr, SORT_ASC, $list);    <br>return $list;<br>}<br><br>效果图如下:<br><img width="640px" src="/uploadfile/Collfiles/20170322/20170322095454340.jpg" alt="" style="height: 560px; width: 315px;"><br>
相关文章
最新文章
热点推荐