百度地图自定义组件
<template>
<div v-show="visible" class="map">
<div id="map-core"></div>
</div>
</template>
<script>
/* eslint-disable */
export default {
name: "theMap",
data() {
return {
visible: true,
location: {
lng: "",
lat: "",
address: "赣州市崇义县崇义汽车站",
},
map: {},
ac: {},
};
},
props: {
// loadMap: { type: Boolean, default: false },
lnglat: { type: Object, default: () => {} },
},
methods: {
loadData() {
// debugger;
this.location.lng = this.lnglat.longitude;
this.location.lat = this.lnglat.latitude;
this.location.address = this.lnglat.resourceAddress;
this.map.centerAndZoom(new BMap.Point( this.location.lng, this.location.lat), 18);
console.log(this.location);
},
// 初始化地图
setMap() {
this.map = new BMap.Map("map-core");
this.map.centerAndZoom(new BMap.Point(114.314981, 25.687931), 18);
/**添加控件 */
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT, // 靠左上角位置
type: BMAP_NAVIGATION_CONTROL_LARGE, // LARGE类型
enableGeolocation: true, // 启用显示定位
});
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function (e) {
// debugger;
// 定位成功事件
var address = "";
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("当前定位地址为:" + address);
});
geolocationControl.addEventListener("locationError", function (e) {
// 定位失败事件
alert(e.message);
});
this.map.addControl(geolocationControl);
this.map.addControl(navigationControl);
const _this = this;
this.map.enableScrollWheelZoom(true);
/** 控件结束*/
var geoc = new BMap.Geocoder();
/**点击地图,获取经纬度及具体位置 */
this.map.addEventListener("click", function (e) {
_this.location.lng = parseFloat(e.point.lng);
_this.location.lat = parseFloat(e.point.lat);
console.log(_this.location.lng, _this.location.lat);
var pt = e.point;
// 具体位置
geoc.getLocation(pt, function (rs) {
//addressComponents对象可以获取到详细的地址信息
var addComp = rs.addressComponents;
var site =
addComp.province +
" " +
addComp.city +
" " +
addComp.district +
" " +
addComp.street +
" " +
addComp.streetNumber;
_this.location.address = site;
// console.log(addComp);
// console.log(_this.location.address);
_this.$emit("getLocation", _this.location);
});
});
// 判断是否有经纬度,有的话,直接根据经纬度定位
this.drawLocation();
},
// 根据经纬度绘制地图中的坐标点
drawLocation() {
if (this.location.lng !== "" && this.location.lat !== "") {
this.map.clearOverlays();
const new_point = new BMap.Point(this.location.lng, this.location.lat);
const marker = new BMap.Marker(new_point);
this.map.addOverlay(marker);
this.map.panTo(new_point);
}
},
// 搜索位置功能实现
setSearch() {
const _this = this;
//建立一个自动完成的对象
this.ac = new BMap.Autocomplete({
input: "suggestId",
location: _this.map,
});
//鼠标放在下拉列表上的事件
this.ac.addEventListener("onhighlight", function (e) {
let str = "";
let _value = e.fromitem.value;
let value = "";
if (e.fromitem.index > -1) {
value =
_value.province +
_value.city +
_value.district +
_value.street +
_value.business;
}
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value =
_value.province +
_value.city +
_value.district +
_value.street +
_value.business;
}
});
let myValue;
//鼠标点击下拉列表后的事件
this.ac.addEventListener("onconfirm", function (e) {
let _value = e.item.value;
myValue =
_value.province +
_value.city +
_value.district +
_value.street +
_value.business;
_this.setPlace(myValue);
});
},
setPlace(myValue) {
const _this = this;
//清除地图上所有覆盖物
this.map.clearOverlays();
//智能搜索
this.local = new BMap.LocalSearch(_this.map, {
onSearchComplete: _this.onSearchComplete,
});
this.local.search(myValue);
},
onSearchComplete() {
//获取第一个智能搜索的结果
let pp = this.local.getResults().getPoi(0).point;
this.location.address = this.local.getResults().keyword;
this.location.lng = parseFloat(pp.lng);
this.location.lat = parseFloat(pp.lat);
this.map.centerAndZoom(pp, 18);
//添加标注
this.map.addOverlay(new BMap.Marker(pp));
},
// 向父组件传递经纬度
selectLocation() {
// console.log(this.location);
this.$emit("selectLocation", this.location);
},
},
mounted () {
this.setMap();
this.setSearch();
},
watch: {
location: {
handler() {
this.drawLocation();
// debugger;
this.$emit("getLocation", this.location);
},
deep: true,
},
visible() {
console.log("ddd");
},
},
};
</script>
<style lang="less" scoped>
.map {
width: 1000px;
height: 450px;
font-size: 14px;
position: relative;
#map-core {
// width: 996px;
height: 100%;
margin: 0;
}
.search {
display: flex;
margin-top: 10px;
height: 40px;
align-items: center;
justify-content: center;
#r-result {
display: flex;
align-items: center;
height: 40px;
background-color: rgb(255, 255, 255);
p {
height: 20px;
padding-right: 10px;
}
input {
width: 220px;
height: 20px;
}
}
.lng-lat {
display: flex;
.item {
display: flex;
align-items: center;
padding-left: 10px;
// height: 20px;
// line-height: 20px;
p {
// height: 20px;
padding-right: 10px;
}
input {
width: 100px;
height: 20px;
}
button {
color: #fff;
height: 28px;
width: 60px;
background: #40b0ff;
border: 1px solid #40b0ff;
border-radius: 2px;
&:hover {
background: #10b0ff;
border: 1px solid #10b0ff;
cursor: pointer;
}
}
}
}
}
}
</style>
<style>
.tangram-suggestion {
z-index: 99999999999999999999999999999;
}
</style>
使用定义组件
<template>
<theMap
@getLocation="getLocation"
ref="mapInit"
:lnglat="ruleForm"
></theMap>
</template>
<script>
export default{
data(){
return {
ruleForm: {
scenicName: "",
imagesPath: "",
scenicAddress: "",
latitude: 25.687785,
longitude: 114.314784,
},
}
},
methods:{
getLocation(location) {
// 赋值经度纬度和地址
if (location) {
this.ruleForm.longitude = location.lng;
this.ruleForm.latitude = location.lat;
this.ruleForm.scenicAddress = location.address;
}
},
}
}
</script>
原文地址:https://marco-hui.github.io/vue-admin-web/?#/home