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

月色真美121

已于 2022-11-21 10:45:37 修改

阅读量2.5k

点赞数 1

分类专栏：高德地图文章标签： vue.js javascript 前端

于 2022-11-17 18:04:39 首次发布

本文链接：https://blog.csdn.net/qq_45410455/article/details/127906142

版权

高德地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

**
高德地图api官网:https://lbs.amap.com/api/jsapi-v2/documentation#geolocationcallback
高德地图在线修改:https://lbs.amap.com/demo/jsapi-v2/example/infowindow/infowindow-event
项目使用vue开发安装高德插件 npm install @amap/amap-jsapi-loader
先来看下添加的搜索功能和之定义图标的效果
在这里插入图片描述

添加自定义信息窗口

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

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

<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.15
		plugins: ['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, // 每页结果数,默认10
				pageIndex: 1, // 请求页码，默认1
				extensions: '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-autocomplete
				v-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>`;
};