• 百度地图自动获取地图中心所在城市名称


    1、编写坐标点地址解析方法

          /**
            * 坐标点地址解析
             * @param point 经纬度点对象
             */
            getGeocoderInfoByPoint:function(point){
                Geocoder.getLocation(point, function(rs) {
                       var addComp = rs.addressComponents;
                       Geocoder.point=point;
                       Geocoder.city=addComp.city;
                       Geocoder.address=addComp.province + " " + addComp.city + " "
                                + addComp.district + " " + addComp.street+ " " + addComp.streetNumber;
                });
                return Geocoder;
            }

    2、注册地图事件

               moveend:function(tagId){
                    map.addEventListener("moveend",function(e){
                        var point=map.getCenter();
                        BmapUtils.getGeocoderInfoByPoint(point);
                        $("#"+tagId).html(Geocoder.city);
                    });
                },
                dragend:function(tagId){
                    map.addEventListener("dragend",function(){
                        var point=map.getCenter();
                        BmapUtils.getGeocoderInfoByPoint(point);
                        $("#"+tagId).html(Geocoder.city);
                    });
                },
                tilesloaded:function(tagId){
                    map.addEventListener("tilesloaded",function(){
                        var point=map.getCenter();
                        BmapUtils.getGeocoderInfoByPoint(point);
                        $("#"+tagId).html(Geocoder.city);
                    });
                }

    3、调用注册事件处理

        //动态改变地图显示城市
        BmapUtils.event.moveend("curCity");
        BmapUtils.event.dragend("curCity");
        BmapUtils.event.tilesloaded("curCity");

    注:解析坐标的方法在BmapUtils下,而事件方法在BmapUtils.event下;可以在之前发布版本上添加。

  • 相关阅读:
    ES7/ES8 语法学习
    JavaScript中this对象原理简洁说明
    浅谈http协议
    各个浏览器之间常见的兼容性问题
    npm -v 报错:cannot find module 'core-util-is'
    对象遍历的几种方法
    Vue项目如何关闭Eslint检测
    axios 基本运用
    如何去掉vue路由中的#
    vue 父子组件、兄弟组件传值
  • 原文地址:https://www.cnblogs.com/boonya/p/3240557.html
Copyright © 2020-2023  润新知