vue项目调用高德地图vue-amap 插件 的AMap.PlaceSearch简用
结合 elementui 的 el-input 直接下拉选取地点 不展示地图
1.下载 npm install vue-amap --save
2.直接在mian.js
import AMap from 'vue-amap';Vue.use(AMap);// 初始化vue-amapAMap.initAMapApiLoader({// 高德keykey: '自己的高德key',// 插件集合 （插件按需引入）plugin: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.ToolBar', 'AMap.Geocoder']});
3.组件页面代码
<template><div :style="conheight"><!-- <div style="height:100%;width:100%" id="container" width tabindex="0"></div> --><div class="search-div" ><el-input id="tipInput" v-model="inputSearchVal" placeholder="请输入搜索名称"><!-- <el-button slot="append" icon="el-icon-search" @click="searchKeyword"> 确定</el-button> --></el-input></div></div></template><script>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和adcodecity: '北京'});});},/** 关键词搜索 */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('<div class=\'input-card content-window-card\'>');//info.push('<div style="padding:7px 0px 0px 0px;"><h4>高德软件</h4>');//info.push('<p class=\'input-item\'>电话 : 010-84107000 邮编 : 100102</p>');//info.push('<p class=\'input-item\'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>');//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 = 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);// },},};</script><style>.search-div {display: flex;align-items: center;width: 300px;height: 40px;box-sizing: border-box;}</style>
使用dialog,搜索出来的结果会在蒙版后面显示，index.html 或者app.vue加样式。代码如下：
.amap-sug-result {
z-index: 99999!important;
}
