精华内容
下载资源
问答
  • bool Stack::pop(char &item)//出栈,栈顶数据弹返回去 { Stacknode *usednodep;//定义指针usednodep,准备指向出栈结点 if(!empty())//判断是否栈空 { usednodep=Stacktop;//指向出栈结点 Stack...
  • //功能:多项式加减法操作 #include <iostream.h>//读入必须包含头文件 #include <windows.h>//清屏和颜色设置需要 #include #include #include #include <math.h>//处理方幂运算 enum returninfo{...
  • 第二他的左上角有一个返回键,在搜索的时候可以返回到地图界面,但是在地图界面时点返回没有用,试了半天也没搞明白怎么监听到那个返回键的点击事件,所以趁这两天项目基本结束自己写一个这个功能优化一下,也方便...
  • 可我找不到任何方法来声明这样函数——感觉我需要一个返回指针函数,返回的指针指向又是返回指针函数……,如此往复,以至无穷。 数组大小 1.23 能否声明和传入数组大小一致局部数组,或者由其他参数指定...
  • //返回键 case KeyEvent.KEYCODE_BACK: this.finish(); break; }//end switch return false; } //按键弹起事件 public boolean onKeyUp(int keyCode, KeyEvent event) { ...
  • vue+高德地图写地图选址组件

    千次阅读 2019-05-17 18:23:16
    第二他的左上角有一个返回键,在搜索的时候可以返回到地图界面,但是在地图界面时点返回没有用,试了半天也没搞明白怎么监听到那个返回键的点击事件,所以趁这两天项目基本结束自己写一个这个功能优化一下,也方便...

    前言

    现在做这个移动端的项目中有一个地图选址的功能,本来高德地图中有一个现成的选址组件,但是有两个问题,因为他是用iframe引用的,第一改不了样式,这点还勉强能接受;第二他的左上角有一个返回键,在搜索的时候可以返回到地图界面,但是在地图界面时点返回没有用,试了半天也没搞明白怎么监听到那个返回键的点击事件,所以趁这两天项目基本结束自己写一个把这个功能优化一下,也方便以后使用。

    开整

    vue的安装使用啥的我在这就不说了,直接开始地图选址组件。
    首先上高德开放平台弄一个key,然后在index.html引入

    <script src="https://webapi.amap.com/maps?v=1.4.14&key=yourKey"></script>
    

    然后写样式
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    css我就不贴了,大概就是上面一个搜索框,中间是地图,然后下面是一个地址列表,然后一个搜索结果的列表。有一点值得注意一下,就是地图中心的定位图标,这个自己弄一个定位图标使用绝对定位,上下左右外边距为auto的方法定位到中间,但是这时地图的中心点是在图标的中心,我们的图标不是一般都是下面是尖的嘛,选址的时候都会用尖的部分指到目标位置,那这样就会有一点偏差,怎么办呢,比如我们的图标是30*30的,我们就把bottom的值设为图标的高度的一半15,或者是把top设为-15,就ok了,另外注意在切图的时候靠着图标边切,不要留空白。
    data里定义的值:

    data(){
       return{
           center: [106.532357,29.57212],//经度+纬度
           search_key: '',               //搜索值
           lists: [],							//地点列表
           search_list: [],              //搜索结果列表
           noSearchShow: false   //无搜索结果提示,无搜索结果时会显示暂无搜索结果
       }
     },
    

    然后在mounted中调取第一个方法------初始化地图:

    adMap(){
    	//初始化地图
        var map = new AMap.Map('container',{
            zoom: 14,            //缩放级别
            center: this.center,  //设置地图中心点
            //resizeEnable: true,  //地图初始化加载定位到当前城市
        });
        //获取初始中心点并赋值
        var currentCenter = map.getCenter();//此方法是获取当前地图的中心点
        this.center = [currentCenter.lng,currentCenter.lat];//将获取到的中心点的纬度经度赋值给data的center
        //根据地图中心点查附近地点,此方法在下方
        this.centerSearch();
        //监听地图移动事件,并在移动结束后获取地图中心点并更新地点列表
        var moveendFun = (e) => {
            // 获取地图中心点
            currentCenter = map.getCenter();
            this.center = [currentCenter.lng,currentCenter.lat]
            //根据地图中心点查附近地点
            this.centerSearch();
        }
        // 绑定事件移动地图事件
        map.on('moveend', moveendFun);
    },
    

    根据中心点查询附近地点

    centerSearch(){
        AMap.service(["AMap.PlaceSearch"], () => {
            //构造地点查询类
            var placeSearch = new AMap.PlaceSearch({ 
                type: '汽车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|地名地址信息', // 兴趣点类别
                pageSize: 30, // 单页显示结果条数
                pageIndex: 1, // 页码
                city: "全国", // 兴趣点城市
                autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            });
            //根据地图中心点查附近地点
            placeSearch.searchNearBy('', [this.center[0],this.center[1]], 200, (status, result) => {
                if(status == 'complete'){
                    this.lists = result.poiList.pois//将查询到的地点赋值
                }
            });
        });
     },
    

    这个方法没什么好说的,就是高德地图的方法,copy过来就行了,要注意的几个点:
    1.type,需要查找的地点的分类,这个可以按需添加减少;
    2.这里可以传条数和页码,如果需要做上拉加载的都可以使用这个;
    3.placeSearch.searchNearBy(),这个方法的第二个参数就是经纬度,是一个数组,这里要注意lng是经度,lat是纬度;
    4.然后是返回值status是状态,result是结果,具体的请参考:
    https://lbs.amap.com/api/javascript-api/reference/search#m_AMap.PlaceSearch

    到这里我们一个地点展示的功能就可以使用了,接下来就是搜索
    首先我使用了watch监听了用户输入的搜索值,当search_key(用户输入的值)不为空时:

    <!--搜索列表-->
    <div class="search-list" v-if="!!search_key">
        <ul>
            <li v-for="(item, index) in search_list" :key="index" @click="onSearchLi(item.location)">
                <span>{{item.name}}</span>
                <p>{{item.address}}</p>
            </li>
            <li v-if="noSearchShow"><p>暂无搜索结果</p></li>
        </ul>
    </div>
    

    我们使用v-if判断当search_key不为空时就显示搜索列表,这里的双感叹号就是强制转换为布尔值,不写也可以的,具体为啥我在这就不多说了;这里的search-list就是定位在页面上的,把地图给它覆盖了,css相信大家都会。

    然后我们来看一看搜索的方法:

    keySearch(){
         AMap.service(["AMap.PlaceSearch"], () => {
             //构造地点查询类
             var placeSearch = new AMap.PlaceSearch({
                 type: '汽车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|地名地址信息', // 兴趣点类别
                 pageSize: 30, // 单页显示结果条数
                 pageIndex: 1, // 页码
                 city: "全国", // 兴趣点城市
                 citylimit: false,  //是否强制限制在设置的城市内搜索
                 autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
             });
             //关键字查询
             placeSearch.search(this.search_key,(status, result) => {
                 if(status == 'complete'){
                     if(result.poiList.count === 0){
                         this.noSearchShow = true;
                     }else{
                         this.search_list = result.poiList.pois//将查询到的地点赋值
                         this.noSearchShow = false;
                     }
                 }else{
                     this.search_list = [];
                     this.noSearchShow = true;
                 }
             });
         });
     },
    

    还是copy高德的方法过来,然后进行配置,主要说一下这里返回结果的处理:
    1.status为complete的时候是完成查询,其中完成后有一个count 参数是代表查到的总条数,如果总条数为0时,我们就this.noSearchShow = true,这个我们上面说了,当noSearchShow 为true的时候会显示‘暂无搜索结果’;如果count不为0的时候,也就是else中的内容,那就将我们查询到的值赋给this.search_list,然后遍历出来,然后记得this.noSearchShow = false;
    2.另外我是将status不为complete的情况统统视为没有搜索结果,这时候我们就清空this.search_list,然后this.noSearchShow = true。

    这时候搜索也完成了,接下来如果我们不想搜索了,清空了搜索框,这是点×的清空方法:

    <span class="clear" v-if="search_key" @click="search_key = ''"></span>
    

    直接@click="search_key = ‘’"就行了,当然我们也可以用输入键盘退格删除,这时要注意清空input之后我们要把search_list也清空并且this.noSearchShow = false,这里我是使用了watch来监控search_key:

    watch: {
         search_key(newv,oldv){
             if(newv == ''){
                 this.search_list = [];
                 this.noSearchShow = false;
             }
         }
     },
    

    至于为什么要清空呢?因为如果我们第一次进行了搜索,这时search_list就有值了,如果下次在进入搜索状态,就会直接显示上次的搜索列表,所以我们要清空一下。

    上面是说的放弃了搜索,这里是说如果搜索到了我们想要的结果,那我们会去点击我们想要的结果:

    //这里我们遍历search_list的时候将location传进来
    onSearchLi(location){
        this.center = [location.lng,location.lat];
        this.adMap();
        this.search_key = '';
    },
    

    这里的步骤是:
    1.先给this.center赋值,这里注意纬度在前,经度在后!
    2.调取上面的this.adMap()查询一次新的lists;
    3.清空search_key,清空search_key后搜索列表就会自动隐藏了,另外因为我们用watch监控了search_key ,所以在这里清空search_key 的同时也会清空search_list并将noSearchShow设为false。

    这里基本上就差不多完成了,还有就是最后一步,我们点击地址列表的时候获取地址信息:

    //html
    <li v-for="(item, index) in lists" :key="index" @click="onResLi(item)">
                 <span>{{item.name}}</span>
                 <p>{{item.address}}</p>
    </li>
    
    //js   
    onResLi(e){
         console.log(e)
    }
    

    这里e打印出来就是选择的地点信息。
    在这里我们组件就完成了,另外可能还需要一个回到当前位置的方法,我说下思路,就不在写出来了:
    1.在地图上写一个图标,给一个点击事件;
    2.点击的时候使用高德的定位方法获取当前位置的坐标,然后赋值给this.center;
    3.再调一次adMap()方法就会回到当前位置了。

    欢迎大佬批评指正优化,小弟献丑了~

    展开全文
  • 实物LCD1602显示温度为0,其他信息正常显示,仿真一切正常,若将显示温度函数单独提取成文件,则正常显示温度,不知道怎么改 PS只需看主函数,LCD1602.h和temp.h就行 ``` #include"key.h" #include"lcd1602.h...
  • 《你必须知道495个C语言问题》

    热门讨论 2010-03-20 16:41:18
    可我找不到任何方法来声明这样函数——感觉我需要一个返回指针函数,返回的指针指向又是返回指针函数……,如此往复,以至无穷。 12  数组大小 13 1.23 能否声明和传入数组大小一致局部数组,或者由...
  • 可我找不到任何方法来声明这样函数——感觉我需要一个返回指针函数,返回的指针指向又是返回指针函数……,如此往复,以至无穷。 12  数组大小 13 1.23 能否声明和传入数组大小一致局部数组,或者由...
  • 如果程序为这样: #include #include "widget.h" #include "mydlg.h" int main(int argc, char *argv[]) { QApplication a(argc, argv); myDlg my1; Widget w; if(my1.exec()==QDialog::Accepted) { w.show(); ...
  • excel使用

    2012-11-25 17:06:01
    (9) 快速清除单元格的内容如果要删除内容的单元格中的内容和它的格式和批注,就不能简单地应用选定该单元格,然后按Delete键的方法了。要彻底清除单元格,可用以下方法:选定想要清除的单元格或单元格范围;单击...
  • 1.10.4 使用EXCEPT和INTERSECT返回不重复或匹配行 38 1.11 汇总数据 40 1.11.1 使用CUBE汇总数据 40 1.11.2 使用ROLLUP来汇总数据 42 1.11.3 使用分组集创建自定义汇总 43 1.11.4 展现GROUPING生成...
  • ES6 实现自己 Promise

    2020-12-26 19:05:55
    在将来某个时间会返回一个成功返回值,或者失败返回值,我们可以为这些返回值添加处理函数,当值返回时,处理函数被调用。Promise总是处于下面三种状态之一: - <em>pending...
  • 官网目前最新版本是1.4.3.3,但是存在一些 BUG,针对部分常见 BUG,我进行了修复,并编译好文件放在了本仓库 assets/downloads 目录下,你可以放心使用,当然你也可以 clone 官方源码自行修复 BUG 并编译...
  • 你必须知道495个C语言问题(PDF)

    热门讨论 2009-09-15 10:25:47
    2.11 为什么sizeof 返回的值大于结构期望值, 是不是尾部有填充? . . 9 2.12 如何确定域在结构中字节偏移? . . . . . . . . . . . . . . . . . 9 2.13 怎样在运行时用名字访问结构中域? . . . . . . . . . . ...
  • 不是因为它「数据预处理」的功能,而是在 web 应用中所有的数据与状态的变化,几乎都来自「事件」。dom 事件,ajax 成功或失败事件,路由 change 事件, setTimeout 定时器事件࿰...
  • Visual Studio程序员箴言--详细书签版

    热门讨论 2012-10-16 20:37:39
     Sara Ford 作为Visual Studio核心团队负责测试的软件设计工程师,Sara Ford分析了Visual Studio核心环境中几乎所有的功能。她从2007年开始在自己的博客上发表”Visual Studio 每日一贴”系列文章,结果大受欢迎,...
  • 例如定义一个包含 N 个指向返回指向字符指针函数指针数组? o 2.8 函数只定义了一次, 调用了一次, 但编译器提示非法重定义了。 o 2.9 main() 正确定义是什么? void main() 正确吗? o 2.10 对于没有...
  • vc++ 应用源码包_1

    热门讨论 2012-09-15 14:22:12
    演示了发送邮箱的功能。 MD5算法 MediaPlayer 视频播放的实现。 MFC 对话框 MP3 内部包含:mp3播放器Lrc歌词同步源程序代码分析、mp3播放器+支持歌词同步显示哦、简单音乐播放器。 mfc 解码 视频音频解码部分。 ...
  • vc++ 应用源码包_6

    热门讨论 2012-09-15 14:59:46
    演示了发送邮箱的功能。 MD5算法 MediaPlayer 视频播放的实现。 MFC 对话框 MP3 内部包含:mp3播放器Lrc歌词同步源程序代码分析、mp3播放器+支持歌词同步显示哦、简单音乐播放器。 mfc 解码 视频音频解码部分。 ...
  • vc++ 应用源码包_2

    热门讨论 2012-09-15 14:27:40
    演示了发送邮箱的功能。 MD5算法 MediaPlayer 视频播放的实现。 MFC 对话框 MP3 内部包含:mp3播放器Lrc歌词同步源程序代码分析、mp3播放器+支持歌词同步显示哦、简单音乐播放器。 mfc 解码 视频音频解码部分。 ...
  • vc++ 应用源码包_5

    热门讨论 2012-09-15 14:45:16
    演示了发送邮箱的功能。 MD5算法 MediaPlayer 视频播放的实现。 MFC 对话框 MP3 内部包含:mp3播放器Lrc歌词同步源程序代码分析、mp3播放器+支持歌词同步显示哦、简单音乐播放器。 mfc 解码 视频音频解码部分。 ...
  • vc++ 应用源码包_4

    热门讨论 2012-09-15 14:38:35
    演示了发送邮箱的功能。 MD5算法 MediaPlayer 视频播放的实现。 MFC 对话框 MP3 内部包含:mp3播放器Lrc歌词同步源程序代码分析、mp3播放器+支持歌词同步显示哦、简单音乐播放器。 mfc 解码 视频音频解码部分。 ...
  • vc++ 应用源码包_3

    热门讨论 2012-09-15 14:33:15
    演示了发送邮箱的功能。 MD5算法 MediaPlayer 视频播放的实现。 MFC 对话框 MP3 内部包含:mp3播放器Lrc歌词同步源程序代码分析、mp3播放器+支持歌词同步显示哦、简单音乐播放器。 mfc 解码 视频音频解码部分。 ...
  • asp.net知识库

    2015-06-18 08:45:45
    asp.net2.0:扩展ImageButton控件定制自己需要的功能 ASP.NET 2.0 正式版中无刷新页面的开发(示例代码的补充) ASP.NET2.0中themes、Skins轻松实现网站换肤! ASP.NET 2.0 中的代码隐藏和编译 ASP.NET 2.0 Language ...
  • 3、执行一个具体的功能之后,程序将重新显示菜单。 4、将学生成绩保存到文件中。 三、算法提示: 1、数据结构:结构体类型数组。 2、数据库结构:下表构成该系统的基本数据库。 姓名 学号 课程名称1 课程名称2 ...
  • Visual Studio程序员箴言中文扫描PDF

    热门讨论 2010-12-28 01:04:18
    技巧2.17 “自动突出显示分隔符”选项的功能是什么 38 技巧2.18 改变大括号匹配的颜色 38 2.1.8 清理未使用的代码 39 技巧2.19 移除未使用的using语句 39 2.1.9 自动恢复 39 技巧2.20 在意外关机时visual...
  • 使用紧急修复磁盘ERD的功能修复系统了。  (2)网络安全模式:和安全模式类似,但是增加了对网络连接的支持。在 局域网环境中解决Windows XP的启动故障,此选项很有用。  (3)命令提示符的安全模式:也和安全...

空空如也

空空如也

1 2 3
收藏数 55
精华内容 22
关键字:

怎么把返回键的功能改