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 myValueac.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)})}},)},// 新增小区 点击的地址增加进listadd_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>

vue 用BMap百度地图即时搜索功能相关推荐

vue中调用百度地图实现搜索等功能
vue中调用百度地图实现搜索等功能在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能,不是很难只是在一个未知的领域可能有点迷茫现在也是体会到了,学新的东西还是得看官方文档 ...
vue + echarts + ( bmap) 百度地图实现公交、骑行、车辆轨迹图
vue + echarts + ( bmap) 百度地图实现公交.骑行.车辆轨迹图最终目标最终目标:个性化的实现公交路线图先看看效果以免白看一场,如果你是想实现类似的效果可以继续往下看码起 ...
java安卓百度地图查找便利店_Android 百度地图POI搜索功能实例代码
在没介绍正文之前先给大家说下poi是什么意思. 由于工作的关系,经常在文件中会看到POI这三个字母的缩写,但是一直对POI的概念和含义没有很详细的去研究其背后代表的意思.今天下班之前,又看到了POI这 ...
ios百度地图地址搜索功能-在线建议查询
最近使用到了百度地图,总结一下,话不多说直接上代码: 使用的是searchBar+在线建议查询一.准备工作导入头文件#import <BaiduMapAPI_Search/BMKSearch ...
vue+百度地图实现搜索功能
这次整理了两个地图,这里的是百度的地图,另一个高德的地图地址https://blog.csdn.net/qq_42165062/article/details/92782197 效果图比较low.需要 ...
vue中的百度地图的搜索定位功能
效果图申请百度地图AK 前往百度地图开放平台控制台 ,登录百度账号,创建应用即得. 封装loadBMap.js文件 /*** 动态加载百度地图api函数* @param {String} ak 百 ...
最新百度地图—POI搜索功能讲解
这几天都在学习百度地图的事例Demo,后续都会有其它功能的讲解: 对了我们这里的最新只是代指现在哦!百度地图更新的很快的,最好还是看百度api最权威. 由于上一篇已经讲解过注册文件,这里我就不写那 ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...

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

功能如下：

代码：

vue 用BMap百度地图即时搜索功能相关推荐

最新文章

热门文章

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

功能如下：

代码：

vue 用BMap百度地图 即时搜索功能相关推荐

最新文章

热门文章

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

vue 用BMap百度地图即时搜索功能相关推荐