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获得url查询参数的方法
Jul 02 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
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+js实现异步图片上传实例分享
2014/06/02 PHP
PHP中的替代语法介绍
2015/01/09 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
浅析Jquery操作select
2016/12/13 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
用Python编程实现语音控制电脑
2014/04/01 Python
python遍历类中所有成员的方法
2015/03/18 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
python中pyplot基础图标函数整理
2020/11/10 Python
新西兰优惠网站:Treat Me
2019/07/04 全球购物
升职自荐信
2013/11/28 职场文书
新员工入职感言
2014/02/01 职场文书
市场部管理制度
2014/02/02 职场文书
施工工地安全标语
2014/06/07 职场文书
车队安全员岗位职责
2015/02/15 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书