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 相关文章推荐
封装的原生javascript弹出层代码
Sep 24 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 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实现字符串反转输出的方法
2015/03/14 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
Python用for循环实现九九乘法表
2018/05/31 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
python支付宝支付示例详解
2019/08/22 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
车间班组长的职责
2013/12/13 职场文书
银行领导证婚词
2014/01/11 职场文书
网络工程师职业规划
2014/02/10 职场文书
老人节标语大全
2014/10/08 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
离职报告范文
2014/11/04 职场文书
会计主管岗位职责
2015/04/02 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
天河观后感
2015/06/11 职场文书
高中班长竞选稿
2015/11/20 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python