参考官方文档
html页面
<template><el-form><el-row :gutter="24"><el-col :span="12"><el-col :span="12"><el-form-item label="位置经度" prop="lng"><el-inputv-model="model.lng"type="number"class="input_number"@mousewheel.native.prevent/></el-form-item></el-col><el-col :span="12"><el-form-item label="位置维度" prop="lat"><el-inputv-model="model.lat"type="number"class="input_number"@mousewheel.native.prevent/></el-form-item></el-col><el-col :span="24"><baidu-mapclass="bm-view"ak="QFgFQorrB84maOZh0pPGC8kUiP0mGIhx":center="center":zoom="zoom":scroll-wheel-zoom="true"@ready="createMap"><!-- 搜索--><bm-local-search :keyword="model.address" :auto-viewport="true"style="display: none"></bm-local-search><!-- 标记--><bm-marker :position="{lng: model.lng, lat: model.lat}"/></baidu-map><el-input v-model="model.address" placeholder="搜索地点"style="margin-left: 10px;width: 200px;position: absolute;top: 25%;opacity: 0.9"prefix-icon="el-icon-search"></el-input></el-col></el-col></el-row></el-form></template>
方法
<script>import BaiduMap from 'vue-baidu-map/components/map/Map.vue'export default {components: {BaiduMap,BmLocalSearch},data () {return {center: {lng: 0, lat: 0},zoom: 10,model: {lng: '',lat: '',address: ''}}},methods: {createMap ({BMap, map}) {// 百度地图API功能this.center.lng = 117.2this.center.lat = 34.26this.zoom = this.zoomconst viewthis = thismap.addEventListener('click', function (e) {viewthis.model.lng = e.point.lngviewthis.model.lat = e.point.lat})// 区域图var datas = new Array('徐州市-#665599')var bdary = new BMap.Boundary()for (var i = 0; i < datas.length; i++) {getBoundary(datas[i], bdary)}// 设置区域图function getBoundary (data, bdary) {data = data.split('-')bdary.get(data[0], function (rs) {// 获取行政区域var count = rs.boundaries.length // 行政区域的点有多少个// var pointArray = []for (var i = 0; i < count; i++) {var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2,strokeColor: '#ff0000',fillOpacity: 0.1,fillColor: data[1]}) // 建立多边形覆盖物map.addOverlay(ply) // 添加覆盖物}})}}}}</script>
样式
<style scoped>.bm-view {width: 100%;height: 300px;}</style>
效果图
点击拾取坐标
地址搜索
