百度地图自定义组件

<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