百度地图+vue+element搜索定位经纬度坐标
1、第一步 安装vue-baidu-map
npm install vue-baidu-map --save
2、第二步 在父组件
<template>
<div id="app">
<el-button @click="mapVisible=!mapVisible"> 打开 </el-button>
<HelloWorld :mapVisible="mapVisible" v-on:mapLocationClose="mapLocationClose" v-on:mapLocationSave="mapLocationSave"></HelloWorld>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
data () {
return {
mapVisible:false
}
},
methods:{
mapLocationClose(){
this.mapVisible = false
},
mapLocationSave(e){
console.log(e)
this.mapVisible = false
}
}
}
</script>
**3、第三步 components文件夹下新建HelloWorld.vue **
<template>
<div>
<el-dialog title="定位设置" :visible.sync="mapVisible" :before-close="close" id="mapDialog" width="65%" top="8vh" :close-on-click-modal="false">
<div>
<el-select
class="select"
v-model="search"
filterable
remote
clearable
reserve-keyword
clearable
@clear="clearSearch"
placeholder="请输入地址"
:remote-method="mapNameChange"
@change="mapNameChange($event,'change')"
:loading="loading"
style="width: 100%;">
<el-option
v-for="item in searchOption"
:key="item.title"
:label="item.title"
:value="item.title">
</el-option>
</el-select>
</div>
<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler"
:scroll-wheel-zoom="true"
@click="clickEvent"
ak="33B192o1jPaqOHASGGAIkoMuwi8W76j3">
<!-- 地图控件位置 -->
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<!-- 城市列表 --</