高德地图2.0Api多边形吸附获取坐标/删除多边形 搜索多边形区域POI数据

高德地图2.0Api多边形吸附获取坐标/删除多边形 搜索多边形区域POI数据

搜索和多边形插件

AMap.PolygonEditor
AMap.PlaceSearch
let polyEditor = new AMap.PolygonEditor(map);

this.placeBoundSearch = new AMap.PlaceSearch({
	pageSize: 9999, // 单页显示结果条数
	pageIndex: 1, // 页码
	city: "上海", // 兴趣点城市
	citylimit: true, //是否强制限制在设置的城市内搜索
	map: map, // 展现结果的地图实例
	panel: "panel", // 结果列表将在此容器中进行展示。
	autoFitView: false, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范    围
});

let polygons = []; // 需要删除的多边形组

polyEditor.on("add", function (data) {
	let polygon = data.target;
	polygons.push(polygon) // 添加多边形到组
	polyEditor.addAdsorbPolygons(polygon);
	polygon.on("dblclick", () => {
		polyEditor.setTarget(polygon);
		polyEditor.open();
	});
});

function createPolygon() {
	polyEditor.close();
	polyEditor.setTarget();
	polyEditor.open();
}

let createBtn = document.querySelector(".createBtn");
let getPathBtn = document.querySelector(".getPathBtn");
let clearBtn = document.querySelector(".clearBtn");

createBtn.onclick = createPolygon;
editBtn.onclick = () => {
	polyEditor.open();
};

let polygonBound;
getPathBtn.onclick = () => {
	polyEditor.close();
	if (polyEditor.getTarget()) {
		let path = [];
		// 获取多边形坐标
		path = polyEditor.getTarget()._opts.path;
		polygonBound = new AMap.Polygon({
			path, //设置多边形边界路径
			strokeColor: "#FF33FF", //线颜色
			strokeOpacity: 0.2, //线透明度
			strokeWeight: 3, //线宽
			fillColor: "#1791fc", //填充色
			fillOpacity: 0.35, //填充透明度
		});
                
		// 可根据类型搜索 空搜索全部
    	this.placeBoundSearch.searchInBounds("",polygonBound, (status, result) => {
			if (result.info === "OK") {
				let pois = result.poiList.pois || [];
            	// 获取搜索结果拿到POI数据
            	console.log(pois);
 			}
 		});
	}
};

clearBtn.onclick = () => { // 清除多边形组内的多边形
	for (let i = 0; i < polygons.length; i++) {
	polygons[i].remove();
}
	polygons = [];
};

你可能感兴趣的:(vue,高德地图)