高德地图|vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用 vue|定位

vue项目调用高德地图vue-amap 插件的AMap.PlaceSearch简用

结合 elementui 的 el-input 直接下拉选取地点不展示地图
【高德地图|vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用】
文章图片

1.下载 npm install vue-amap --save

2.直接在mian.js

import AMap from 'vue-amap'; Vue.use(AMap); // 初始化vue-amap AMap.initAMapApiLoader({ // 高德key key: '自己的高德key', // 插件集合（插件按需引入） plugin: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.ToolBar', 'AMap.Geocoder'] });

3.组件页面代码

> export default { name: 'mapDetail', data () { return { // 地图map对象 map: undefined, // 组件 autoCompleteComponent: undefined, placeSearchComponent: undefined,// 样式 conheight: { height: '600px', width: '' }, // marker点集合 markerList: [], mapInput: '', inputSearchVal: '',}; }, // created(){ //window.addEventListener('resize', this.handleResize); // }, // beforeDestroy: function () { //window.removeEventListener('resize', this.handleResize); // }, // computed: { //rightWidth(){ //let leftWidth = this.isCollapse ? '64' : '200'; //console.log(this.conheight.width); //return (this.conheight.width-leftWidth)+'px'; //} // }, mounted () { this.init(); // this.addMarker(); this.mapSearchInit(); }, methods: {/** 初始化map对象 */ init: function () { let map = new AMap.Map('container', { center: [116.397428, 39.90923], resizeEnable: true, zoom: 15, lang: 'cn' }); AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () { map.addControl(new AMap.ToolBar()); map.addControl(new AMap.Scale()); }); this.map = map; }, /** 初始化搜索工具 */ mapSearchInit(){ let that = this; // 绑定自动提示 AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function(){ var autoOptions = { input: 'tipInput', city: '北京', }; var autoCompleteComponent= new AMap.Autocomplete(autoOptions); // 监听选中项 AMap.event.addListener(autoCompleteComponent, 'select', function(data){ console.log(data); if ( data.poi.location != undefined){ //定位到中心点 console.log('定位中心点'); that.map.setCenter(data.poi.location); //TODO 获取数据，对数据进行操作如：添加marker等}}); that.autoCompleteComponent = autoCompleteComponent; // 注册placeSearch组件 that.placeSearchComponent = new AMap.PlaceSearch({ // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode city: '北京' }); }); }, /** 关键词搜索 */ searchKeyword(){ this.placeSearchComponent.search(this.inputSearchVal, function (status, result) { // 查询成功时，result即对应匹配的POI信息 console.log(status); console.log(result); }); }, /** 打开marker消息窗体 */ // openInfo(positionResult, pointData) { //var info = []; //info.push(''); //info.push('高德软件'); //info.push('电话 : 010-84107000邮编 : 100102 '); //info.push('地址 :北京市朝阳区望京阜荣街10号首开广场4层 '); //let infoWindow = new AMap.InfoWindow({ //content: info.join(''), //offset: new AMap.Pixel(10, -25) //}); //infoWindow.open(this.map, positionResult.lnglat); // }, /** 添加marker */ // addMarker(){ //let that = this; //var marker = new AMap.Marker({ //position: new AMap.LngLat(116.397428, 39.90923), //title: '北京', //extData: { id: '123456' } //}); ////绑定点击事件 //marker.on('click', positionResult => { //console.log(positionResult); //let pointData = https://www.it610.com/article/positionResult.target.getExtData(); //that.openInfo( positionResult, pointData); //}); //this.markerList.push(marker); //this.map.add(this.markerList); // }, /** 处理宽 */ // handleResize (event) { //this.conheight.width = document.documentElement.clientWidth; //this.conheight.height = document.documentElement.clientHeight; //console.log(document.documentElement.clientHeight); // },}, }; > .search-div { display: flex; align-items: center; width: 300px; height: 40px; box-sizing: border-box; }

使用dialog,搜索出来的结果会在蒙版后面显示，index.html 或者app.vue加样式。代码如下：
.amap-sug-result {
z-index: 99999!important;
}