vue webpack方式调用amap高德地图及其UI组件

头像
码农笔录
2018-12-03阅读 13711

vue2(webpack)调用amap高德地图及其UI组件和标记物

点击查看效果图 https://www.aiprose.com/map 这是效果图地址,完整效果请下载运行demo

点击下载demo https://git.coding.net/mnbl/gaode-demo.git demo下载地址,下载后运行起来,请点击标题栏 “地图demo1” 和 “地图demo2”,进行查看效果。

今天一个app项目中要使用vue2加入高德地图,本来以为有第三方的插件,结果没找到适合自己用的,因为地图这块,一般都是自定义程度比较高的。注:这里是最简单的demo,更多更详细请阅读官方api,有问题请在下方评论,或者加群讨论QQ群:128806068

1、申请key

点击下边的网址,创建应用,然后申请key,后期要用到,如果已经有key,忽略这一步 http://lbs.amap.com/dev/key/app

2、修改配置

首先要在build/webpack.base.conf.js 加入如下配置,负责vue中使用import会报错。 如果如下导入还AMap报错,请使用window.AMap。因为后边要使用高德的infowindow,最简单的不好扩展,而且没有点击事件,所以用用到了高德的ui。位置见下图

externals: { 'AMap': 'AMap', 'AMapUI': 'AMapUI' }

amap1.png

3、调用高德地图

  • 首先在index.html中加入如下引用
<!--引入高德地图JSAPI --> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=您申请的key值"></script> <!--引入UI组件库(1.0版本) --> <script src="https://webapi.amap.com/ui/1.0/main.js"></script>
  • 新建一个map.vue组件

在script中引入如下组件,如果第二步不配置,这里会报错

import AMap from 'AMap' import AMapUI from 'AMapUI'

注意:
如果eslint一直检查不通过,加入下面注释

/* eslint-disable no-undef */ import AMap from 'AMap' import AMapUI from 'AMapUI'

template中加入map的div,注意如果map不显示,没报错的时候,请检查div的宽高。

<div id="map-container"> </div>

然后再mounted(不是created)中初始化地图,这时候地图就会显示出来了,但是没有任何组件,注意vue2废弃ready,请使用mounted。代码位置不懂的看图片

amap2.png

// 创建地图 ,使用高德默认的图层 let mapObj = new AMap.Map('map-container', { center: [108.963148, 34.232709], zoom: 11 })

如果使用自定义图层,前提是这个图层是偏移过的

//谷歌的影响图层 let googleLayerimage = new AMap.TileLayer({ getTileUrl: 'https://mt{1,2,3,0}.google.cn/maps/vt?lyrs=s@194&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]', zIndex: 2 }) // 控制图层的显示与隐藏 // googleLayerimage.hide() // googleLayerimage.show() let googleLayervector = new AMap.TileLayer() // 创建地图,使用自己的图层 let mapObj = new AMap.Map('map-container', { layers: [googleLayervector, googleLayerimage], center: [108.963148, 34.232709], zoom: 11 })

两个组件:放大缩小按钮和图层的切换

mapObj.plugin(['AMap.ToolBar', 'AMap.MapType'], function () { mapObj.addControl(new AMap.ToolBar()) mapObj.addControl(new AMap.MapType({showTraffic: false, showRoad: false})) })

使用高德定位

mapObj.plugin(['AMap.Geolocation'], function () { let geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位,默认:true timeout: 10000, // 超过10秒后停止定位,默认:无穷大 maximumAge: 0, // 定位结果缓存0毫秒,默认:0 convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:true showButton: true, // 显示定位按钮,默认:true buttonPosition: 'LB', // 定位按钮停靠位置,默认:'LB',左下角 buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) showMarker: true, // 定位成功后在定位到的位置显示点标记,默认:true showCircle: true, // 定位成功后用圆圈表示定位精度范围,默认:true panToLocation: true, // 定位成功后将定位到的位置作为地图中心点,默认:true zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false }) mapObj.addControl(geolocation) geolocation.getCurrentPosition() AMap.event.addListener(geolocation, 'complete', (result) => { mapObj.setCenter(result.position) }) // 返回定位信息 AMap.event.addListener(geolocation, 'error', (result) => { console.log(result) }) // 返回定位出错信息 })

4、地图添加标记物和信息框 marker和infowindow

因为我从后台取到的点是gps定位的点,因为坐标系不同,所以要将gps的点转成高德坐标系的点;点击marker显示infowindow,并给infowindow添加点击事件

// 后台取到的点,新建LngLat对象 let lngLat = new AMap.LngLat(lanlet[0].trim(), lanlet[1].trim()) // 转高德坐标系,这是高德提供的api AMap.convertFrom(lngLat, 'gps', function (info, result) { lngLat = result.locations[0]// 转换后的坐标位置 var marker = new AMap.Marker({ position: lngLat, map: mapObj }) AMap.event.addListener(marker, 'click', (e) => { AMapUI.loadUI(['overlay/SimpleInfoWindow'], function (SimpleInfoWindow) { var infoWindow = new SimpleInfoWindow({ infoTitle: '<strong>这是标题</strong>', infoBody: '<p>这是信息</p>', offset: new AMap.Pixel(0, -20), autoMove: true }) infoWindow.open(mapObj, e.target.getPosition()) // 最坑的就是这一步了,他的infowindow没有点击事件,所以infoWindow.get$Container()会返回这个infowindow(jquery)对象 let infoEle = infoWindow.get$Container() //给infowindow添加点击事件,并在回调函数中处理业务或者跳转等 infoEle.on('click', (e) => { router.push({name: 'proinfo', params: pro}) }) }) }) })