<template> <div class="center"> <div class="baidu-map" id="baidu_Map" ref="baiduMapRef"></div> <div ref="r_result" class="r-result"> 搜索地址 : <input type="text" id="suggestId" class="suggestId" placeholder="请输入" /> </div> <div id="searchResultPanel" style=" border: 1px solid #c0c0c0; 150px; height: auto; display: none; " ></div> </div> </template> <script> import { BaiduMap } from "@/libs/map.js"; export default { name: "", components: {}, props: { showEdit: { type: Boolean, default: false, }, toLatLng: { type: Object, default: "", }, }, data() { return { map: null, zoom: 16, marker: null, info: { centerLng: "", centerLat: "", }, }; }, mounted() { setTimeout(() => { this.initMap(); console.log(this.toLatLng, 333); }, 1000); }, created() {}, methods: { initMap() { let _this = this; BaiduMap.init().then((BMap) => { _this.map = new BMap.Map("baidu_Map"); _this.map.centerAndZoom( new BMap.Point(_this.toLatLng.centerLng, _this.toLatLng.centerLat), _this.toLatLng.mapLevel ); _this.map.addControl( new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], //图层类型 anchor: BMAP_ANCHOR_TOP_LEFT, //切换按钮位置 }) ); _this.map.enableScrollWheelZoom(); //有坐标标点 if (_this.toLatLng.centerLat && _this.toLatLng.centerLng) { _this.info.centerLng = _this.toLatLng.centerLng; _this.info.centerLat = _this.toLatLng.centerLat; _this.setInitMarker(); } if (this.showEdit) { _this.map.addEventListener("click", _this.MapClick); //显示搜索功能 this.$refs.r_result.style.visibility = "visible"; } //以下是搜索功能 //建立一个自动完成的对象 let ac = new BMap.Autocomplete({ input: "suggestId", location: _this.map, }); //鼠标放在下拉列表上的事件 ac.addEventListener("onhighlight", (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; } str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; this.GOing("searchResultPanel").innerHTML = str; }); //鼠标点击下拉列表后的事件 ac.addEventListener("onconfirm", (e) => { let _value = e.item.value; this.myValue = _value.province + _value.city + _value.district + _value.street + _value.business; this.GOing("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />this.myValue = " + this.myValue; this.setPlace(); }); }); //传出去 // _this.$emit("getLngLat", _this.info); }, //获取id的值 GOing(id) { return document.getElementById(id); }, //搜索设置位置 setPlace() { let _this = this; _this.map.clearOverlays(); //清除地图上所有覆盖物 // let that = this; function myFun() { //获取第一个智能搜索的结果 let pp = local.getResults().getPoi(0).point; _this.map.centerAndZoom(pp, _this.toLatLng.mapLevel); //添加标注 _this.map.addOverlay(new BMap.Marker(pp)); _this.info.centerLng = pp.lng; _this.info.centerLat = pp.lat; //传出去 _this.$emit("getLngLat", _this.info); } //智能搜索 let local = new BMap.LocalSearch(this.map, { onSearchComplete: myFun, }); local.search(this.myValue); }, //地图设置标点 setInitMarker() { let _this = this; _this.marker = new window.BMap.Marker( new window.BMap.Point(_this.info.centerLng, _this.info.centerLat) ); _this.map.addOverlay(_this.marker); }, //地图点击事件 MapClick(e) { let _this = this; if (_this.marker) { _this.map.clearOverlays(); } const myGeo = new BMap.Geocoder(); myGeo.getLocation(e.point, (rs) => { _this.info.addr = rs.address; }); _this.info.centerLng = e.point.lng; _this.info.centerLat = e.point.lat; let new_point = new window.BMap.Point( _this.info.centerLng, _this.info.centerLat ); _this.map.panTo(new_point); _this.marker = new window.BMap.Marker(new_point); _this.map.addOverlay(_this.marker); //传出去 _this.$emit("getLngLat", _this.info); }, }, }; </script> <style lang="less" scoped> .center { 100%; // height: 40.5vh; height: 100%; position: relative; .baidu-map { 100%; height: 600px; } .r-result { display: inline-block; position: absolute; right: 5px; top: 5px; color: #000; font-size: 16px; z-index: 999999; visibility: hidden; .suggestId { border: 1px solid #73859f; outline: none; 220px; height: 30px; border-radius: 4px; padding-left: 5px; z-index: 999999; } .tangram-suggestion-main { z-index: 9999 !important; } } } </style>
调用
<baiduMap @getLngLat="getLngLat" :showEdit="false" :toLatLng="info" ></baiduMap>