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

 更新时间:2019年09月26日 11:37:33   作者:小羽向前跑  
这篇文章主要为大家详细介绍了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>

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

相关文章

  • 对vuex中getters计算过滤操作详解

    对vuex中getters计算过滤操作详解

    今天小编就为大家分享一篇对vuex中getters计算过滤操作详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue.js每天必学之过滤器与自定义过滤器

    Vue.js每天必学之过滤器与自定义过滤器

    Vue.js每天必学之过滤器与自定义过滤器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • vite2.0+vue3移动端项目实战详解

    vite2.0+vue3移动端项目实战详解

    这篇文章主要介绍了vite2.0+vue3移动端项目实战详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue-cli配置文件——config篇

    vue-cli配置文件——config篇

    这篇文章主要介绍了vue-cli中的webpack是如何配置的,本篇文章主要是分析vue中关于config文件夹中的相关代码,config的文件结构,感兴趣的朋友参考下本文
    2018-01-01
  • vue自定义底部导航栏Tabbar的实现代码

    vue自定义底部导航栏Tabbar的实现代码

    这篇文章主要介绍了vue自定义底部导航栏Tabbar的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue获取当前点击的元素并传值的实例

    vue获取当前点击的元素并传值的实例

    下面小编就为大家分享一篇vue获取当前点击的元素并传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue使用vue-i18n实现国际化的实现代码

    vue使用vue-i18n实现国际化的实现代码

    本篇文章主要介绍了vue使用vue-i18n实现国际化的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue中插入HTML代码的方法

    Vue中插入HTML代码的方法

    这篇文章主要介绍了Vue中插入HTML代码的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue 通过绑定事件获取当前行的id操作

    vue 通过绑定事件获取当前行的id操作

    这篇文章主要介绍了vue 通过绑定事件获取当前行的id操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue项目使用localStorage+Vuex保存用户登录信息

    Vue项目使用localStorage+Vuex保存用户登录信息

    这篇文章主要为大家详细介绍了Vue项目使用localStorage+Vuex保存用户登录信息,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论