JSAPI 高德地图应用 |
您所在的位置：网站首页 › 高德地图编队功能 › JSAPI 高德地图应用 |
JSAPI 高德地图应用
|
在高德地图的应用中，地图上总少不了搜索框，用于搜索并定位某一位置，并获取某一定位点的经纬度，类似于这种：
这种搜索方法一般是高德地图的输入提示插件AMap.Autocomplete和POI搜索插件AMap.PlaceSearch结合来实现的； 首先需要定义一个input输入框，并赋予id，id是关键，至于输入框放置位置，可以自己调节 因为这两个都是高德地图的插件，所有需要引入进来 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)即可。 |
【本文地址】
今日新闻 |
推荐新闻 |