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 相关文章推荐
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
javascript之函数直接量(function(){})()
Jun 29 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
json对象转字符串如何实现
Dec 02 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
js模拟微博发布消息
Feb 23 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
PHP HTML代码串截取代码
2008/12/29 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
优化PHP程序的方法小结
2012/02/23 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
亮化工程实施方案
2014/03/17 职场文书
通信工程求职信
2014/07/16 职场文书
五好家庭申报材料
2014/12/20 职场文书
医院科室评语
2015/01/04 职场文书
岳麓书院导游词
2015/02/03 职场文书
活动新闻稿范文
2015/07/17 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
element多个表单校验的实现
2021/05/27 Javascript
MySQL创建定时任务
2022/01/22 MySQL