时间:2021-05-26
本文实例为大家分享了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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
用Vue调用百度的搜索接口,实现简单的搜索功能。搜索框的样式是基于Bootstrap,当然对样式做了简单的调整,使之类似于百度搜索。代码如下百度搜索.gray{
百度4K地图是什么?百度4k地图怎么打开?百度4k地图是百度地图新出的功能,用户可以通过百度4k地图更好的找到相关的路线,那么百度4K地图是什么?百度4k地
正常在使用百度地图时,我们可以通过BMap的实例对象提供的方法计算距离:varmap=newBMap.Map('map_canvas');map.getDist
本文实例讲述了thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果。分享给大家供大家参考,具体如下:用过百度搜索的人应该都知道这个效果,今天我用T
为增加用户更加的体验,百度地图增加三维新功能1、点击百度浏览器右上角的地图,进入百度地图2、搜索要查找的名称,例如:顺德的华桂园3、点击信息下方的”