html
<el-button type="primary" style="margin-left: 10px;" @click="latitude()">获取经纬度</el-button>
<el-dialog
width="50%"
:before-close="cancel"
:closable="false"
:mask-closable="false"
:visible="visible"
>
<span>
<p>经纬度:{{center.lng}},{{center.lat}}</p>
<baidu-map class="map" :center="{lng: 116.394155, lat: 39.921696}" :zoom="15"
:scroll-wheel-zoom="true"
@click="getClickInfo"
>
<!-- mapType="BMAP_SATELLITE_MAP" -->
<bm-control :offset="{ width: '10px', height: '10px' }">
<bm-auto-complete v-model="keyword" :sugStyle="{ zIndex: 999999 }">
<input
type="text"
placeholder="请输入搜索关键字"
class="serachinput"
/>
</bm-auto-complete>
</bm-control>
<bm-local-search
:keyword="keyword"
:auto-viewport="true"
style="width:0px;height:0px;overflow: hidden;"
></bm-local-search>
</baidu-map>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
js
export default {
components: {
// nopro
},
data() {
return {
visible:false,//隐藏百度地图弹窗
center: { lng: 104.710326, lat: 27.118777 },
zoom: 15,
}
},
created() {
},
methods:{
latitude() {
this.visible = true,
},
/***
* 确认
*/
confirm: function () {
this.visible = false,
console.log(this.center)
this.addBidding_Data.Location = this.center.lng + ',' + this.center.lat//获取的经纬度
this.$emit('map-confirm', this.center)
},
/***
* 取消
*/
cancel: function () {
this.visible = false
this.$emit('cancel')
},
},
}
public/index.html
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=vQSaczUq2vZ83ygi84YN8rViDKSXOCXB&s=1"></script>
//ak通过百度地图api获取