高德地图准备工作

安装amap
cnpm国内安装比npm更快些；

cnpm install vue-amap --save

main.js
配置amap的基础配置项

import GaodeMap from 'vue-amap'
Vue.use(GaodeMap)
GaodeMap.initAMapApiLoader({key: 'testkey', // 这里填写你申请的keyplugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'], // 使用到的工具v: '1.4.4', // 版本号uiVersion: '1.0'
})

.eslintrc.js
插入全局变量防止报错，如下代码

globals: {AMap: true,AMapUI: true
}

关键字搜索

HTML部分代码

<el-amap ref="map" style="width:500px;height:360px" />
<div id="address-list" style="width:200px;height:300px" />

JavaScript部分代码

var map = this.$refs.map.$amap
AMap.service(['AMap.PlaceSearch'], () => {var placeSearch = new AMap.PlaceSearch({ // 构造地点查询类pageSize: 5, // 单页显示结果条数pageIndex: 1, // 页码citylimit: true, // 是否强制限制在设置的城市内搜索map: map, // 展现结果的地图实例panel: 'address-list', // 结果列表将在此容器中进行展示。autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围})// 关键字查询placeSearch.search(this.form.address, (status, result) => {// 查询成功时，result即对应匹配的POI信息})// 监听选中节点事件AMap.event.addListener(placeSearch, 'selectChanged', (SelectChangeEvent) => {// 获取节点信息自行处理逻辑代码this.mark = SelectChangeEvent.selected.data})
})

vue高德地图实现关键字搜索相关推荐

python获取高德地图POI——关键字搜索
本文主要内容是利用python获取高德地图上的感兴趣点(POIs). 高德开放平台:https://lbs.amap.com/ 下载POI分类编码和城市编码表搜索POI相关文档:https://lb ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
vue+高德地图绘制路径
一.vue+高德地图开发最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
vue + 高德地图 + wind-layer实现风场
vue + 高德地图 + wind-layer实现风场效果图: 第一步:引入 wind-layer插件或者 npm install ol-wind npm install amap-wind ht ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局绘制页面 <div class="Clock"><!-- ...
Vue 高德地图 js API Loca 如何使用连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用连接线图层.脉冲连线图层阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式已经了解如何载入 Loca 插件如果不了解,可以查看我之 ...
vue高德地图搜索功能
一.开发环境: vue版本:v2.5.2 vue-cli版本:v2.9.3 webpack版本:3.6.0 高德地图api版本:JavaScript API V1.4.12 二.直入主题首先在,in ...

vue高德地图实现关键字搜索

高德地图准备工作

关键字搜索

vue高德地图实现关键字搜索相关推荐

最新文章

热门文章