vue 中使用 vue |
您所在的位置：网站首页 › 哔咔软件图标 › vue 中使用 vue |
vue 中使用 vue
|
业务需求： 1. 点击地图获取经纬度及地址； 2. 输入内容搜索获取经纬度及地址; 开始： 使用前 可以先查阅官网: vue-amap 其中比较重要的: 1. vue-amap 能够抛开高德原生 SDK 覆盖大多数场景，但对于部分定制化程度较高的场景而言，可能还是需要引入高德原生 SDK 来支持。这章将介绍如何在 vue-amap 中使用高德 SDK。 实例方式 对于大多数 vue-amap 组件，都有 init 这个 event，参数为高德的实例，通过这样暴露高德实例的方式，开发者能够非常自由地将原生 SDK 和 vue-amap 结合起来使用。 这里以 el-amap 组件举例。el-amap 比较特殊，它同时还支持一个 amap-manager 属性，通过这个属性，可以在任何地方拿到高德原生 AMap.Map 实例。下面的例子，将介绍两种方式的使用。 若涉及到高德原生 AMap 需要注意的点： 确保 vue-amap 的导入名不是 AMap，推荐 import VueAMap from 'vue-amap' 避免和高德全局的 AMap 冲突。若 eslint 报错 AMap is undefined 之类的错误。请将 AMap 配置到 .eslintrc 的 globals 中。
1. 安装
2. main.js 中引入 import VueAMap from 'vue-amap' Vue.use(VueAMap) VueAMap.initAMapApiLoader({ key: 'd7918df******************a5', plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'], v: '1.4.4', uiVersion: '1.0' })key： 高德的key（自己申请） plugin： 引用的插件（根据需要引入） v： 高德SDK 版本 uiVersion：UI库 版本 3. 在map.vue 中调用 template 搜索amap-manager： 地图管理对象 vid：地图容器节点的ID zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19] center： 地图中心点坐标值 plugin：地图使用的插件 events： 事件 JavaScript import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap' let amapManager = new AMapManager() export default { data () { let self = this return { address: null, searchKey: '', amapManager, markers: [], searchOption: { city: '全国', citylimit: true }, center: [121.329402, 31.228667], zoom: 17, lng: 0, lat: 0, loaded: false, events: { init () { lazyAMapApiLoaderInstance.load().then(() => { self.initSearch() }) }, // 点击获取地址的数据 click (e) { // console.log(e) self.markers = [] let { lng, lat } = e.lnglat self.lng = lng self.lat = lat self.center = [lng, lat] self.markers.push([lng, lat]) // 这里通过高德 SDK 完成。 let geocoder = new AMap.Geocoder({ radius: 1000, extensions: 'all' }) geocoder.getAddress([lng, lat], function (status, result) { if (status === 'complete' && result.info === 'OK') { if (result && result.regeocode) { console.log(result.regeocode.formattedAddress) self.address = result.regeocode.formattedAddress self.searchKey = result.regeocode.formattedAddress self.$nextTick() } } }) } }, // 一些工具插件 plugin: [ // { // pName: 'Geocoder', // events: { // init (o) { // console.log(o.getAddress()) // } // } // }, { // 定位 pName: 'Geolocation', events: { init (o) { // o是高德地图定位插件实例 o.getCurrentPosition((status, result) => { if (result && result.position) { // 设置经度 self.lng = result.position.lng // 设置维度 self.lat = result.position.lat // 设置坐标 self.center = [self.lng, self.lat] self.markers.push([self.lng, self.lat]) // load self.loaded = true // 页面渲染好后 self.$nextTick() } }) } } }, { // 工具栏 pName: 'ToolBar', events: { init (instance) { // console.log(instance); } } }, { // 鹰眼 pName: 'OverView', events: { init (instance) { // console.log(instance); } } }, { // 地图类型 pName: 'MapType', defaultType: 0, events: { init (instance) { // console.log(instance); } } }, { // 搜索 pName: 'PlaceSearch', events: { init (instance) { // console.log(instance) } } } ] } }, methods: { initSearch () { let vm = this let map = this.amapManager.getMap() AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) { var poiPicker = new PoiPicker({ input: 'search', placeSearchOptions: { map: map, pageSize: 10 }, suggestContainer: 'searchTip', searchResultsContainer: 'searchTip' }) vm.poiPicker = poiPicker // 监听poi选中信息 poiPicker.on('poiPicked', function (poiResult) { // console.log(poiResult) let source = poiResult.source let poi = poiResult.item if (source !== 'search') { poiPicker.searchByKeyword(poi.name) } else { poiPicker.clearSearchResults() vm.markers = [] let lng = poi.location.lng let lat = poi.location.lat let address = poi.cityname + poi.adname + poi.name vm.center = [lng, lat] vm.markers.push([lng, lat]) vm.lng = lng vm.lat = lat vm.address = address vm.searchKey = address } }) }) }, searchByHand () { if (this.searchKey !== '') { this.poiPicker.searchByKeyword(this.searchKey) } } } }css .container { width: 700px; height: 500px; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); border: 1px solid #999; } .search-box { position: absolute; z-index: 5; width: 70%; left: 13%; top: 10px; height: 30px; } .search-box input { float: left; width: 80%; height: 100%; border: 1px solid #30ccc1; padding: 0 8px; outline: none; } .search-box button { float: left; width: 20%; height: 100%; background: #30ccc1; border: 1px solid #30ccc1; color: #fff; outline: none; } .tip-box { width: 100%; max-height:260px; position: absolute; top: 30px; overflow-y: auto; background-color: #fff; }问题： 出现报错
解决： 在.eslintrc.js 中引入 globals globals: { 'AMap': false, 'AMapUI': false },然后重启： cnpm run dev (本人用的是cnpm)； 完成
完整代码： github |
【本文地址】
今日新闻 |
推荐新闻 |