vue中使用高德地图搜索自定义图标信息窗体

窗体"/>

vue中使用高德地图搜索自定义图标信息窗体

**

最近由于项目开发需要使用到地图,尝试过高德&百度&天地图,最后采用了高德地图进行开发

**
高德地图api官网:
高德地图在线修改:
项目使用vue开发 安装高德插件 npm install @amap/amap-jsapi-loader
先来看下添加的搜索功能和之定义图标的效果


添加自定义信息窗口

在这里插入代码片  cnpm install @amap/amap-jsapi-loader

注册开发者和申请key这里就不重复了大家可以自己去申请一下
地址 /
现在项目中引入并调用初始化地图

<div class="map"><div id="bai-du-map"><!-- 技术支持和联系方式  --></div></div>
在这里插入代码片 引入 import AMapLoader from '@amap/amap-jsapi-loader';
let map, Amap, timerout,MSearch;
// 设置安全密钥
window._AMapSecurityConfig = {securityJsCode: '安全密钥',
};
const state = reactive({keyWord: '仙桃',result: [{ name: '仙桃1' }],MSearch: null,
});
const initMap = () => {AMapLoader.load({key: '申请的key',version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {Amap = AMap;// 初始化地图map = new AMap.Map('bai-du-map', {viewMode: '3D', //  是否为3D地图模式zoom: 16, // 初始化地图级别center: [113.442973, 30.328407], // 中心点坐标  仙桃resizeEnable: true,});var layers = [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()];// 地图上设置图层map.setLayers(layers);map.addControl(new AMap.ToolBar()); // 添加组合控件map.addControl(new AMap.Scale()); // 添加比例尺map.addControl(new AMap.HawkEye({ isOpen: true })); // 添加鹰眼控件map.addControl(new AMap.MapType({ defaultType: 1 })); // 添加图层切换控件map.addControl(new AMap.Geolocation()); // 添加定位// this.map.setFeatures(["road", "point", "bg", "building"]);// 构造地点查询map.on('click', function (e) {console.log(e, '点击的经纬度');const { lng, lat } = e.lnglat;addMarker({ lng, lat });addInfo({ lng, lat });});var PlaceSearchOptions = {// 设置PlaceSearch属性city: '420000', // 城市type: '', // 数据类别pageSize: 10, // 每页结果数,默认10pageIndex: 1, // 请求页码，默认1extensions: 'base', // 返回信息详略，默认为base（基本信息）};state.MSearch = new AMap.PlaceSearch(PlaceSearchOptions); // 构造PlaceSearch类state.MSearch.search(state.keyWord, keywordSearch_CallBack);AMap.Event.addListener(state.MSearch, 'complete', keywordSearch_CallBack); // 返回结果// console.log(MSearch.search("方恒国际中心")); //关键字查询// this.addMarker(AMap) // 添加标注和// addMarker(); //添加图标// addText(); //添加文字}).catch((e) => {console.log(e);});
};
页面加载调用
onMounted(() => {initMap();
});

**

搜索结果处理

**

在这里插入代码片
<div class="keyword"><el-autocompletev-model="state.keyWord":fetch-suggestions="querySearchAsync"placeholder="搜索位置、区域、地点"class="int_search"@select="handleSelect"><template #default="{ item }"><div class="result_list"><div class="list_left">{{ item.name }}</div><span class="list_right">{{ item.address }}</span></div></template></el-autocomplete></div>
const querySearchAsync = (query, cb) => {state.MSearch.search(query, keywordSearch_CallBack);let res = state.result;if (query) {clearTimeout(timerout);timerout = setTimeout(() => {cb(res);}, 1000);}// let;
};
const handleSelect = (e) => {state.keyWord = e.name;const { lng, lat } = e.location;map.setCenter([lng, lat]);addMarker({ lng, lat }, e.name);
};,
//搜索结果回调
const keywordSearch_CallBack = (e) => {console.log(e, '搜索结果');const { poiList } = e;if (poiList) {state.result = poiList.pois;console.log(state.result, '');}
};

**

添加标注

**

在这里插入代码片
//添加标注
const addMarker = (LngLat = {}, title = '仙桃') => {const { lng = 113.442973, lat = 30.328407 } = LngLat;const icons = new Amap.Icon({image: icon, //自定义图标路径size: new AMap.Size(30, 30), //图片大小imageSize: new AMap.Size(30, 30), //图片拉伸设置// imageOffset: new AMap.Pixel(0, -60), //图片偏移});var marker = new Amap.Marker({position: new Amap.LngLat(lng, lat), //定义图标的位置offset: new Amap.Pixel(0, 0), //设置图标偏移量icon: icons, //自定义图标路径title: title, //设置标题draggable: true, //是否可以拖拽cursor: 'move', //方式移动});//设置文本marker.setLabel({direction: 'bottom',offset: new AMap.Pixel(0, 10), //设置文本标注偏移量content: `<div class='info'>${title}</div>`, //设置文本标注内容});map.add(marker); //往地图上添加标注// map.remove(marker)//删除标记点
};

**

添加文字标记

**

在这里插入代码片 //添加文字标记
const addText = (LngLat = {}, title = '仙桃') => {const { lng = 113.442973, lat = 30.328407 } = LngLat;var text = new Amap.Text({text: title,anchor: 'bottom', //设置文本标记锚点draggable: true, //设置可以拖动cursor: 'pointer',style: {},position: [lng, lat],offset: new AMap.Pixel(0, 40), //设置偏移量});text.setMap(map); //往地图上添加文字
};

**

添加自定义信息窗体

**

在这里插入代码片
//添加自定义信息窗体
const addInfo = (LngLat = {}, title = '仙桃') => {const { lng = 113.442973, lat = 30.328407 } = LngLat;let infoWindow = new Amap.InfoWindow({position: [lng, lat],offset: new Amap.Pixel(0, -30),content: infoHtml(title),});infoWindow.open(map);
};
//窗体点击事件
const addbtn = (e) => {console.log(e, '我是信息窗体点击来的');
};
//窗体样式
const infoHtml = (title) => {return `<div class="info_"><div class="info_title">${title}</div><div class="info_btn" onclick ="addbtn('${title}')">点击跳转</div></div>`;
};