安装:npm install vue-baidu-map --save
实现效果:
页面增加标记及多边形等覆盖物,标记可点击及拖拽调整,同时也可通过关键词搜索获取获取经纬度,调整标记点位置,获取推荐几个地址,问题地址下拉选择其中一个地址等
marker.vue组件
<template>
<div class="markmap">
<baidu-map
id="baiduMap"
ak="123"
class="baidu-map bm-view"
:center="center"
:zoom="zoom"
:scroll-wheel-zoom="false"
:mapClick="false"
@ready="handlerMap"
@click="mapClickFun"
>
<bm-marker
:dragging="marker.dragging || false"
v-for="(marker, index) of markers"
:key="index"
:position="{ lng: marker.lng, lat: marker.lat }"
@click="lookDetail(marker)"
@dragend="markerDragendEvent"
:icon="{
url: marker.icon
? marker.icon
: 'http://api0.map.bdimg.com/images/marker_red_sprite.png',
size: { width: 50, height: 65 },
}"
></bm-marker>
<bm-polygon
v-if="path && path.length > 0"
:path="path"
:strokeColor="strokeColor"
></bm-polygon>
<!-- <bm-panorama anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-panorama> -->
<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-navigation>
<!-- <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale> -->
<BmGeolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></BmGeolocation>
<!-- <bmLocalSearch v-if="searchKeyword" :autoViewport="true" :keyword="searchKeyword" :panel="false" :selectFirstResult="true" @searchcomplete="searchcomplete"></bmLocalSearch> -->
</baidu-map>
</div>
</template>
<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmMarker from "vue-baidu-map/components/overlays/Marker.vue";
import BmPolygon from "vue-baidu-map/components/overlays/Polygon.vue";
import BmPanorama from "vue-baidu-map/components/controls/Panorama.vue";
import BmNavigation from "vue-baidu-map/components/controls/Navigation.vue";
import BmScale from "vue-baidu-map/components/controls/Scale.vue";
import BmGeolocation from "vue-baidu-map/components/controls/Geolocation.vue";
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch.vue";
export default {
props: {
canAddMarker: {
type: Boolean,
default: false,
},
searchKeyword: String,
keyword: {
type: [Array, String],
},
strokeColor: {
type: String,
default: "#2A8DFF",
},
path: {
type: Array,
default: () => [],
},
markers: {
type: Array,
default: () => [],
},
pcenter: {
type: Object,
default: () => ({
lng: 114.97731018066408,
lat: 25.8246784210205,
}),
},
},
components: {
BaiduMap,
BmMarker,
BmPolygon,
BmPanorama,
BmNavigation,
BmScale,
BmGeolocation,
BmLocalSearch,
},
watch: {
searchKeyword: {
handler(val) {
if (val) {
this.localSearchFun();
}
},
},
pcenter: {
handler(val) {
this.center = val;
},
},
},
data() {
return {
zoom: 13,
center: {
lng: 114.97731018066408,
lat: 25.8246784210205,
},
};
},
created() {},
mounted() {
this.suofang();
},
methods: {
handlerMap({ BMap, map }) {
this.BMap = BMap;
this.map = map;
},
//点击地图事件 增加标记点
mapClickFun(e) {
if (this.canAddMarker) {
const _this = this;
let geoc = new BMap.Geocoder();
geoc.getLocation(e.point, function (rs) {
_this.$emit("updateMarkerLocal", e.point, rs);
});
}
},
//缩放
suofang() {
document.querySelector(".bm-view").onmousewheel = (e) => {
e = e || window.event;
if (e.stopPropagation) {
//这是取消冒泡
e.stopPropagation();
} else {
e.cancelBubble = true;
}
if (e.preventDefault) {
//这是取消默认行为,要弄清楚取消默认行为和冒泡不是一回事
e.preventDefault();
} else {
e.returnValue = false;
}
//放大 getZoom返回地图当前缩放级别
if (e.wheelDelta > 0) {
this.zoom = this.zoom + 1;
if (this.zoom > 19) {
this.zoom = 19;
}
}
//缩小
if (e.wheelDelta < 0) {
e.cancelBubble = true;
this.zoom = this.zoom - 1;
if (this.zoom < 4) {
this.zoom = 4;
}
}
};
},
//拖拽标记 获取周边地址供选择
markerDragendEvent(e) {
console.log(e);
const _this = this;
let geoc = new BMap.Geocoder();
geoc.getLocation(e.point, function (rs) {
_this.$emit("updateMarkerLocal", e.point, rs);
});
},
//关键词搜索
localSearchFun(searchWord) {
const _this = this;
this.$nextTick(() => {
const local = new BMap.LocalSearch(this.map, {
onSearchComplete: function (e) {
_this.$emit("searchcomplete", e);
},
});
local.search(searchWord ? searchWord : this.searchKeyword);
});
},
lookDetail() {},
searchcomplete(e) {},
},
};
</script>
<style lang="scss" scoped>
.markmap {
width: 800px;
height: 500px;
.baidu-map {
width: 100%;
height: 100%;
}
}
</style>
页面
<template>
<div class="">
<el-form :model="form" label-width="155px">
<el-form-item label="点击Map获取地址信息">
<el-autocomplete
class="myinput"
v-model="form.address"
:fetch-suggestions="queryAddressSearch"
placeholder="请输入"
@select="handleAddressSelect"
:maxlength="20"
clearable
></el-autocomplete>
</el-form-item>
<el-form-item label="关键搜索获取经纬度">
<el-input
v-model="form.address1"
placeholder="请输入关键词搜索,如赣州市"
maxlength="20"
></el-input>
</el-form-item>
</el-form>
<markerMap
ref="mydrawMap"
class="mymap-wrap"
:canAddMarker="canAddMarker"
:path="path"
:strokeColor="strokeColor"
:pcenter="center"
:markers="markers"
:searchKeyword="form.address1"
@searchcomplete="searchcomplete"
@updateMarkerLocal="updateMarkerLocal"
></markerMap>
</div>
</template>
<script>
import markerMap from "@/components/Map/marker";
export default {
props: [],
components: { markerMap },
data() {
return {
form: {
address: "",
},
canAddMarker: true,
strokeColor: "#CC16EF",
center: {
lng: "114.933625",
lat: "25.85190",
},
path: [
{ lng: 114.92785540582945, lat: 25.83652466645269 },
{ lng: 114.92823026067752, lat: 25.847650021588933 },
{ lng: 114.93326455552047, lat: 25.84679557530646 },
{ lng: 114.94444120792562, lat: 25.847283346808027 },
{ lng: 114.94666935084885, lat: 25.846470393187857 },
{ lng: 114.94991319176417, lat: 25.844372292159633 },
{ lng: 114.9536417373817, lat: 25.840323628122093 },
{ lng: 114.95646285382479, lat: 25.83860005841268 },
{ lng: 114.96159150781574, lat: 25.83115605191992 },
{ lng: 114.96356808621543, lat: 25.824976622119365 },
{ lng: 114.9643227797862, lat: 25.82133385975571 },
{ lng: 114.9613758810813, lat: 25.81834150683285 },
{ lng: 114.9581414800636, lat: 25.816454984607688 },
{ lng: 114.95318206516998, lat: 25.81499128286883 },
{ lng: 114.950630482145, lat: 25.813495035728792 },
{ lng: 114.94502418704789, lat: 25.80816043559642 },
{ lng: 114.93953141347649, lat: 25.80412817087722 },
{ lng: 114.93648047520966, lat: 25.807707561717777 },
{ lng: 114.94762118982572, lat: 25.816164775470398 },
{ lng: 114.93985862738357, lat: 25.82410099603871 },
{ lng: 114.94194301915044, lat: 25.826117491923867 },
{ lng: 114.94172739241593, lat: 25.839321438580683 },
{ lng: 114.93834924024202, lat: 25.839256398119232 },
{ lng: 114.92785540582945, lat: 25.83652466645269 },
],
markers: [
{
lng: "114.933625",
lat: "25.85190",
icon: "data:image/png;base64,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",
},
/* {
lat: "25.826759824838696",
lng: "114.94770203106496",
dragging: true,
icon: "data:image/png;base64,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",
offset: [3, -18],
}, */
],
};
},
created() {},
mounted() {},
methods: {
queryAddressSearch(queryString, cb) {
var restaurants = [];
if (this.restaurants) {
restaurants.push({
value: this.restaurants.address,
point: this.restaurants.point,
});
this.restaurants.surroundingPois.forEach((item) => {
restaurants.push({
value: item.address + "-" + item.title,
point: item.point,
});
});
}
let results = queryString
? restaurants.filter(this.createFilter(queryString))
: restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
},
handleAddressSelect(e) {
this.form.address = e.value;
},
//输入关键词获取地址经纬度,在地图上标记 (橙色)
searchcomplete(e) {
if (e && e.Yr && e.Yr.length > 0) {
const point = e.Yr[0].point;
this.updateStoreMark(point);
}
},
updateStoreMark(point) {
this.center = point;
const address = {
...point,
icon: require("@/assets/shop.png"),
};
this.$message('lng:'+point.lng+",lat:"+point.lat);
this.markers.splice(0, 1, address);
},
//点击地图新增标记或者移动标记位置 (红色)
updateMarkerLocal(point, rs) {
this.restaurants = rs;
console.log(rs);
this.form.address=rs.address
this.addProblemAddressMark(point, false);
},
addProblemAddressMark(point, updateCenter = true) {
const address = {
...point,
dragging: true,
icon: require("@/assets/address.png"),
offset: [3, -18],
};
const len = this.markers.length || 0;
if (len <= 1) {
this.markers.push(address);
} else {
this.markers.splice(len - 1, 1, address);
}
if (updateCenter) {
this.center = point;
}
},
},
};
</script>
<style lang="scss" scoped>
.el-input,.el-autocomplete{
width: 400px;
}
</style>