百度地图开发 Javascript API

最新推荐文章于 2023-06-15 14:36:39 发布

菜菜的戈麦斯

最新推荐文章于 2023-06-15 14:36:39 发布

阅读量374

点赞数

分类专栏： js 地图开发

本文链接：https://blog.youkuaiyun.com/qq_39950233/article/details/96782419

版权

js 同时被 2 个专栏收录

6 篇文章

订阅专栏

地图开发

2 篇文章

订阅专栏

本文介绍如何使用百度地图API实现地图标志物与面板信息的联动功能，包括点击地图标志物显示相关信息，以及通过面板操作使对应标志物居中显示等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为google map 在大陆被墙（有个大陆版的，但是在大陆地区还是百度好用），很多在大陆开展业务的客户都要求用百度地图。

客户的要求大概这样，点击地图的标志物找到面板上相对应的信息，或者点击面板上的信息，对应的标志物移动到地图中间。改变图片。（我的谷歌地图开发也一样的）

首先要去百度地图开发平台申请api key 百度地图开发平台

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=“你的的百度api key”"></script>

  //初始化
        function initialize() {
            var map = new BMap.Map("allmap");
            point = new BMap.Point(114.11728, 22.545459);
            map.centerAndZoom(point, 12);

            //开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);

            //平移缩放控件
            var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT};
            map.addControl(new BMap.NavigationControl(opts));

            //所有覆盖标签 
//抛出闭包的用处,方便后面通过面板操作覆盖物
            var allTags =  renderOverlay(map);
             

            // 公共定位器
            var geolocation = new BMap.Geolocation();

            //是否启用附近功能
            window.nearby = true;


            //left navigation 显示隐藏标题 移动位置
            window.activeIdentify = "";
            $("#-list").on("click","li",function (e) {

               

               
                window.activeIdentify  = idenify;
                allTags[idenify].showTite();
                allTags[idenify].moveToCenter();
            });

          

       

            // 附近搜索  related with  moveend zoomend
            $("#map-panel-nearby-content button").on("click",function () {
                searchNearby(allTags,map,geolocation);
            });

            map.addEventListener("zoomend",function () {
                mapZoomend(allTags,map);
            });

            map.addEventListener("touchmove",function (){
                $(".evisu-map-wrapper").removeClass(" active");
            });

            map.addEventListener("moveend",function () {
                mapMove(allTags,map);
            });

            // 初始化定位
            getCurrents(map,geolocation);

            // 移动 active tag 到中心
            $(".panel-ctrl").on("click",function () {
                $(".evisu-map-wrapper").toggleClass(" active");
                if(window.activeIdentify!=""){
                    setTimeout(function(){
                        allTags[window.activeIdentify].moveToCenter();
                    }, 700);
                }
            });
        }
        //init 结束


      // 自定义覆盖物
        function renderOverlay(map) {

           //公司业务逻辑不公开啦！！
          //抛出闭包的用处,方便后面通过面板操作覆盖物

            return tagContainer;
        }

        // 浏览器定位
        function getCurrents(map,geolocation) {
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){

                    point = new BMap.Point(r.point.lng,r.point.lat);
                    map.centerAndZoom(point,12);
                    map.panTo(r.point);
                } else {
                    alert('您的位置获取失败'+this.getStatus());
                }
            });
        }

       
        // 地图移动
        function mapMove(allTags,map){
            for(items in allTags){
                allTags[items].hideTite();
            }

            if(window.activeIdentify!=""){
                allTags[window.activeIdentify].showTite();
            }

            if(!window.nearby){
                return;
            }
            var bs = map.getBounds();   //获取可视区域
            var bssw = bs.getSouthWest();   //可视区域左下角
            var bsne = bs.getNorthEast();   //可视区域右上角
            var swLng = bssw.lng ,
                swLat = bssw.lat ,
                neLng = bsne.lng ,
                neLat = bsne.lat;

            var storeList='';
            for(tag in allTags){
              //公司业务逻辑不公开啦！！
            }

         
        }

       //地图放大
       function mapZoomend(allTags,map){


           if(!window.nearby){
               return;
           }

           var bs = map.getBounds();   //获取可视区域
           var bssw = bs.getSouthWest();   //可视区域左下角
           var bsne = bs.getNorthEast();   //可视区域右上角
           var swLng = bssw.lng ,
               swLat = bssw.lat ,
               neLng = bsne.lng ,
               neLat = bsne.lat;
           var storeList='';
           for(tag in allTags){
              //公司业务逻辑不公开啦！！
           }

           $("#evisu-store-list").html(storeList);
       }

    //附近搜索
       function searchNearby(allTags,map,geolocation){
           window.nearby = true;
           geolocation.getCurrentPosition(function(r){
               if(this.getStatus() == BMAP_STATUS_SUCCESS){
                   point = new BMap.Point(r.point.lng,r.point.lat);
                   map.centerAndZoom(point,12);
                   map.panTo(r.point);


                   var bs = map.getBounds();   //获取可视区域
                   var bssw = bs.getSouthWest();   //可视区域左下角
                   var bsne = bs.getNorthEast();   //可视区域右上角
                   var swLng = bssw.lng ,
                       swLat = bssw.lat ,
                       neLng = bsne.lng ,
                       neLat = bsne.lat;

                   for(tag in allTags){
                       var lng = allTags[tag]._point.lng,
                           lat =  allTags[tag]._point.lat;
                       if(lng>swLng && lng<neLng && lat>swLat && lat<neLat){
                          
                       }else{
                          
                       }
                   }

               } else {
                   alert("无法获取您的位置,请开启浏览器定位权限,iphone用户打开手机【设置】-【隐私】-【定位服务】进行设置；安卓用户打开手机【设置】-【应用权限管理】-【权限管理】查看。或者打开地图APP或网页输入您的位置");
               }
           });

       }