vue中使用高德地图搜索&自定义图标&信息窗体
vue3项目中使用高德地图开发&搜索&自定义图标&信息窗口
·
**
最近由于项目开发需要使用到地图,尝试过高德&百度&天地图,最后采用了高德地图进行开发
**
高德地图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>`;
};
更多推荐
已为社区贡献5条内容
所有评论(0)