PHP对接百度地图


  • <span style="font-family:Microsoft YaHei;font-size:14px;"><html>  
  •     <head>          
  •         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  •         <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
  •         <title>百度地图搜索</title>  
  •         <script type="text/javascript" src="http://mapclick.map.baidu.com/data/98_36_11_018.js"></script>  
  •         <script type="text/javascript"   
  •             src="http://api.map.baidu.com/api?v=1.5&ak=1jwM1UGS8wPTvaiUSUaUnuOG"></script>  
  •     </head>  
  •     <body>  
  •         <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>  
  •           
  •         要查询的地址:<input id="text_" type="text" value="山东济南泉城广场" style="margin-right:100px;"/>  
  •         查询结果(经纬度):<input id="result_" type="text" />  
  •         <input type="button" value="地址查询经纬度" onclick="searchByStationName();"/>  
  •           
  •         <div id="r-result">  
  •         城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" />  
  •                 <input type="button" value="查询" onclick="theLocation()" />  
  •         </div>  
  •         <div id="results" style="font-size:13px;margin-top:10px;"></div>  
  •     </body>  
  • </html>  
  • <script type="text/javascript">  
  •   
  •     var map = new BMap.Map("container");  
  •     map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  
  •     map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用  
  •     map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用  
  •     //为了使用地图更加方便,我们还可以添加上缩放的平移控件,以及地图的缩略图控件,并设置他要显示的位置:  
  •     map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件  
  •     map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件  
  •     map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角,打开  
  •       
  •     //var local = new BMap.LocalSearch(map, {  
  •     //    renderOptions: {map: map, panel: "results"}  
  •     //});  
  •     //var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: map.getCenter()};  
  •     ////var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)};  
  •     //map.addControl(new BMap.NavigationControl(opts));  
  •       
  •     //local.search("北京市海淀区上地地铁站");  
  •             
  •     //1.构建搜索  
  •     var localSearch = new BMap.LocalSearch(map);  
  •     localSearch.enableAutoViewport(); //允许自动调节窗体大小  
  •     //2.开始做最关键的一步了,就是获取地址的具体经纬度:  
  •     var searchByStationName = function(){  
  •         var keyword = document.getElementById("text_").value;  
  •         //搜索回调方法  
  •       localSearch.setSearchCompleteCallback(function (searchResult) {  
  •             alert(searchResult);  
  •         var poi = searchResult.getPoi(0);  
  •         document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; //获取经度和纬度,将结果显示在文本框中  
  •         map.centerAndZoom(poi.point, 13);  
  •       });  
  •       localSearch.search(keyword);  
  •     }  
  •       
  •       
  •     /********************************** 
  •     ***********百度地图API功能********* 
  •     **********************************/  
  •     //1.城市名定位  
  •     //var map = new BMap.Map("allmap");  
  •     //var point = new BMap.Point(116.331398,39.897445);  
  •     //map.centerAndZoom(point,11);  
  •   
  •     function theLocation(){  
  •         var city = document.getElementById("cityName").value;  
  •         if(city != ""){  
  •             map.centerAndZoom(city,11);      // 用城市名设置地图中心点  
  •         }  
  •     }  
  •       
  •     //2.IP定位获取当前城市  
  •     function myFun(result){  
  •         var cityName = result.name;  
  •         map.setCenter(cityName);  
  •         alert("当前定位城市:"+cityName);  
  •     }  
  •     var myCity = new BMap.LocalCity();  
  •     myCity.get(myFun);  
  •       
  •     //3.单击获取点击的经纬度  
  •     //单击获取点击的经纬度  
  •     var longitude = "";//经度  
  •     var latitude = "";//纬度  
  •     map.addEventListener("click",function(e){  
  •         alert("经度:"+e.point.lng + "," + "纬度:" +e.point.lat);  
  •         longitude = e.point.lng;  
  •         latitude = e.point.lat;  
  •         if(longitude != "" && latitude != ""){  
  •             map.clearOverlays();   
  •             var new_point = new BMap.Point(longitude,latitude);  
  •             var marker = new BMap.Marker(new_point);  // 创建标注  
  •             map.addOverlay(marker);              // 将标注添加到地图中  
  •             map.panTo(new_point);  
  •             marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画  
  •         }  
  •     });  
  •       
  •       
  •     //4 用经纬度设置地图中心点  
  •     /*function theLocation(){ 
  •         if(longitude != "" && latitude != ""){ 
  •             map.clearOverlays();  
  •             var new_point = new BMap.Point(longitude,latitude); 
  •             var marker = new BMap.Marker(new_point);  // 创建标注 
  •             map.addOverlay(marker);              // 将标注添加到地图中 
  •             map.panTo(new_point); 
  •         } 
  •     }*/  
  •       
  •     //5.逆地址解析,点击地图展示详细地址  
  •     var geoc = new BMap.Geocoder();      
  •   
  •     map.addEventListener("click", function(e){          
  •         var pt = e.point;  
  •         geoc.getLocation(pt, function(rs){  
  •             var addComp = rs.addressComponents;  
  •             alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);  
  •         });          
  •     });  
  • </script>  
  • </span>  

  • 免责声明!

    本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



     
    粤ICP备18138465号  © 2018-2025 CODEPRJ.COM