在高德地图的应用中,地图上总少不了搜索框,用于搜索并定位某一位置,并获取某一定位点的经纬度,类似于这种:
这种搜索方法一般是高德地图的输入提示插件AMap.Autocomplete和
POI搜索插件AMap.PlaceSearch
结合来实现的;
首先需要定义一个input输入框,并赋予id,id是关键,至于输入框放置位置,可以自己调节
<input id='tipinput' type="text">
因为这两个都是高德地图的插件,所有需要引入进来
AMap.plugin([ 'AMap.Autocomplete', 'AMap.PlaceSearch'], () => {
var autoOptions = {
city: '全国', //city 限定城市,默认全国
input: 'tipinput',//绑定的输入框id
}
const autoComplete = new AMap.Autocomplete(autoOptions)
placeSearch = new AMap.PlaceSearch({
city: '全国',
map: self.map,
citylimit: true,
autoFitView: true
})
AMap.event.addListener(autoComplete, 'select', (e) => {
//TODO 针对选中的poi实现自己的功能
placeSearch.setCity(e.poi.adcode)
placeSearch.search(e.poi.name)
})
})
搜索到某一区域后,如果想要在地图上添加某一定位点,需要添加地图的绘制工具:AMap.MouseTool,引入方式跟上方一样,可以添加一个btn来调用drawMarker的方法
AMap.plugin(['AMap.MouseTool'], () => {
mouseTool = new AMap.MouseTool(map)
// 绘制覆盖物
mouseTool.on('draw', (e) => {
overlays.push(e.obj)
console.log('定位点的经纬度',e.obj.getPosition())
//获取定位点的经纬度使用e.obj.getPosition()
})
// 绘制点
drawMarker () {
mouseTool.marker({})
},
这个时候就获取到定位点的经纬度了,可以传给后端进行保存,可以添加表单填写其他信息,用于之后初始化定位点,在地图上进行渲染,可以参照之前的文章:JSAPI 高德地图应用---批量初始化点标记、矢量图形
如果想要绘制其他矢量图形的话,方法类型,但是获取经纬度的方法会有些差距,见代码:
// 绘制线
drawPolyline () {
mouseTool.polyline({
strokeColor: '#80d8ff',
})
},
// 绘制多边形
drawPolygon () {
mouseTool.polygon({
fillColor: '#f21e2b33' ,//填充颜色
strokeColor:'#00a4ff',//描边颜色
})
},
// 绘制矩形
drawRectangle () {
mouseTool.rectangle({
fillColor: '#00a4ff33',
strokeCollor: '#00a4ff',
})
},
// 绘制圆形
drawCircle () {
mouseTool.circle({
fillColor: '#f21e2b33',
strokeCollor: '#F21E2B',
})
},
// 绘制覆盖物
mouseTool.on('draw', (e) => {
overlays.push(e.obj)
console.log('获取圆的圆心经纬度',e.obj.getCenter())
console.log('获取圆的半径,单位是米',e.obj.getRadius())
console.log('获取多边形、矩形、线的经纬度集合,是一个数组,按点依次排列',e.obj.getPath())
})
上面的overlays是保存绘制覆盖物的数据,如果想要清除绘制的覆盖物直接 map.remove(overlays)即可。