vue用BMap百度地图实现即时搜索功能


Posted in Javascript onSeptember 26, 2019

 本文实例为大家分享了vue用BMap百度地图实现即时搜索功能的具体代码,供大家参考,具体内容如下

vue用BMap百度地图实现即时搜索功能

vue用BMap百度地图实现即时搜索功能

功能如下:

搜索框搜索---自动下拉---点击数据---数据显示在搜索框里---点击新增--数据显示在下方--点击删除--删除当前

代码:

首先去百度开发者申请一个key

然后将key引入到项目的 index.html:

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

下面是组件代码:

<template>
 <div id="app">
 <el-form label-width="200px">
  <el-form-item label="包含小区" required class="housing_input">
  <el-input id="suggestId" v-model="city" placeholder="请输入小区名称" name="address_detail" />
  <div id="allmap"/>
  <el-button @click="add_housing">新增</el-button>
  <div v-for="(item,index) in add_housing_list" :key="index" class="housingList">
   <span>{{item}}</span>
   <el-button class="delete_button" @click="delete_housing(index)">删除</el-button>
  </div>
  </el-form-item>
 </el-form>
 </div>
</template>
 
<script>
export default {
 name: 'demo',
 data(){
 return{
 city: '',
 address_detail: null, //详细地址
 add_housing_list: ["阿里巴巴"],
 }
 },
 mounted() {
 this.getcity()
 },
 methods:{
 getcity(){
 this.$nextTick(function() {
 var th = this
 // 创建Map实例
 var map = new BMap.Map('allmap')
 // 初始化地图,设置中心点坐标,
 var point = new BMap.Point(120.211877, 30.255194) // 创建点坐标,汉得公司的经纬度坐标
 map.centerAndZoom(point, 15)
 map.enableScrollWheelZoom()
 
 var ac = new BMap.Autocomplete( // 建立一个自动完成的对象
 {
  'input': 'suggestId',
  'location': map
 })
 var myValue
 ac.addEventListener('onconfirm', function(e) { // 鼠标点击下拉列表后的事件
 var _value = e.item.value //获取点击的条目
 myValue = _value.province + _value.city + _value.district + _value.street + _value.business //地址拼接赋给一个变量
 th.city = myValue //将地址赋给data中的city
 // console.log(th.city)
 setPlace()
 })
 // console.log(ac.pc.input)
 function setPlace() {
 map.clearOverlays() // 清除地图上所有覆盖物
 function myFun() {
  th.userlocation = local.getResults().getPoi(0).point // 获取第一个智能搜索的结果
  map.centerAndZoom(th.userlocation, 18)
  map.addOverlay(new BMap.Marker(th.userlocation)) // 添加标注
 }
 
 var local = new BMap.LocalSearch(map, { // 智能搜索
  onSearchComplete: myFun
 })
 local.search(myValue)
 
 // 测试输出坐标(指的是输入框最后确定地点的经纬度)
 map.addEventListener('click', function(e) {
  // 经度
  console.log(th.userlocation.lng)
  // 纬度
  console.log(th.userlocation.lat)
 })
 }
 },)
 },
 // 新增小区 点击的地址增加进list
 add_housing() {
 this.add_housing_list.push(this.city)
 },
 // 删除小区
 delete_housing(index) {
 // console.log(index)
 this.add_housing_list.splice(index, 1)
 },
}
}
</script>
 
<style scoped>
.housingList{
 margin-top:20px;
}
.delete_button{
 color: #409EFF;
 text-decoration: underline;
 border:none;
 background:#fff;
 cursor: pointer;
 margin-left:20px;
}
 
.el-input{
 width: 800px;
 }
 .housing_input .el-input{
 width: 730px;
 }
 
 #allmap{
 width: 400px;
 height: 400px;
 font-family: "微软雅黑";
 display: none;
}
 
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
简单学习vue指令directive
Nov 03 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
vant时间控件使用方法详解
Dec 24 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 #Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 #Javascript
vue+element tabs选项卡分页效果
Jun 29 #Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 #Javascript
vue+element表格导出为Excel文件
Sep 26 #Javascript
利用layer实现表单完美验证的方法
Sep 26 #Javascript
vue点击当前路由高亮小案例
Sep 26 #Javascript
You might like
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
Django实现简单的分页功能
2021/02/22 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
奥地利网上书店:Weltbild
2017/07/14 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
捐款倡议书格式范文
2014/05/14 职场文书
装修施工安全责任书
2014/07/24 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
邀请书格式范文
2015/02/02 职场文书
服务员岗位职责范本
2015/04/09 职场文书