怎么在vue中使用BMap百度地圖實(shí)現(xiàn)一個(gè)即時(shí)搜索功能-創(chuàng)新互聯(lián)

怎么在vue中使用BMap百度地圖實(shí)現(xiàn)一個(gè)即時(shí)搜索功能？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

成都創(chuàng)新互聯(lián)公司是專業(yè)的廣陽(yáng)網(wǎng)站建設(shè)公司，廣陽(yáng)接單;提供做網(wǎng)站、網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行廣陽(yáng)網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

具體內(nèi)容如下

首先去百度開(kāi)發(fā)者申請(qǐng)一個(gè)key

然后將key引入到項(xiàng)目的 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="包含小區(qū)" required class="housing_input">
  <el-input id="suggestId" v-model="city" placeholder="請(qǐng)輸入小區(qū)名稱" 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, //詳細(xì)地址
 add_housing_list: ["阿里巴巴"],
 }
 },
 mounted() {
 this.getcity()
 },
 methods:{
 getcity(){
 this.$nextTick(function() {
 var th = this
 // 創(chuàng)建Map實(shí)例
 var map = new BMap.Map('allmap')
 // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)，
 var point = new BMap.Point(120.211877, 30.255194) // 創(chuàng)建點(diǎn)坐標(biāo)，漢得公司的經(jīng)緯度坐標(biāo)
 map.centerAndZoom(point, 15)
 map.enableScrollWheelZoom()
 
 var ac = new BMap.Autocomplete( // 建立一個(gè)自動(dòng)完成的對(duì)象
 {
  'input': 'suggestId',
  'location': map
 })
 var myValue
 ac.addEventListener('onconfirm', function(e) { // 鼠標(biāo)點(diǎn)擊下拉列表后的事件
 var _value = e.item.value //獲取點(diǎn)擊的條目
 myValue = _value.province + _value.city + _value.district + _value.street + _value.business //地址拼接賦給一個(gè)變量
 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 // 獲取第一個(gè)智能搜索的結(jié)果
  map.centerAndZoom(th.userlocation, 18)
  map.addOverlay(new BMap.Marker(th.userlocation)) // 添加標(biāo)注
 }
 
 var local = new BMap.LocalSearch(map, { // 智能搜索
  onSearchComplete: myFun
 })
 local.search(myValue)
 
 // 測(cè)試輸出坐標(biāo)（指的是輸入框最后確定地點(diǎn)的經(jīng)緯度）
 map.addEventListener('click', function(e) {
  // 經(jīng)度
  console.log(th.userlocation.lng)
  // 緯度
  console.log(th.userlocation.lat)
 })
 }
 },)
 },
 // 新增小區(qū) 點(diǎn)擊的地址增加進(jìn)list
 add_housing() {
 this.add_housing_list.push(this.city)
 },
 // 刪除小區(qū)
 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>

看完上述內(nèi)容，你們掌握怎么在vue中使用BMap百度地圖實(shí)現(xiàn)一個(gè)即時(shí)搜索功能的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞標(biāo)題：怎么在vue中使用BMap百度地圖實(shí)現(xiàn)一個(gè)即時(shí)搜索功能-創(chuàng)新互聯(lián)
URL標(biāo)題：http://muchs.cn/article40/dooeho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、云服務(wù)器、做網(wǎng)站、用戶體驗(yàn)、服務(wù)器托管、全網(wǎng)營(yíng)銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容