注：本文基于上一篇文章【Vue-Cli 3.0中配置高德地图】 ,采用直接引入高德软件开发工具包(软件开发工具包)的方式来使用高德地图美国石油学会(美国石油协会)

一、效果图

二、组件要实现的功能

1.如果有传入坐标点，则定位到坐标点

2.如果没有传入坐标点，则定位到当前所在位置

3.定位成功要在右侧显示经纬度和地址

4.可以通过拖动标记来调整定位点

5.标记拖动后，右侧要显示拖动后的经纬度和地址

6.点击确定按钮，返回最后的坐标点和地名给父组件

三、组件实现具体代码

模板div class=' map-box ' : style=' { width : width，height : height } ' div id=' AMAP ' class=' AMAP '/div class=' detail ' p经度：{ {点？点[0] : '-'}}/p p纬度：{ {点？点[1] : '-'}}/p p地址：{{address}}/p按钮大小=' mini ' class=' BTN地图' @ click=' commit '确定/button/div/div/template script import AmaP from ' AmaP ' export default { prop : { width : { type : String，default: '100%' }，height: { type: String，default: ' 400px ' }，lnglat: { type: Array，validator :(value)={ return。长度====2 } } }初始化init (lnglat) { //地图实例对象（北极监测评价方案为容器的id)让amap=新的北极监测评价方案.Map('amap '，{ resizeEnable: true，zoom: 15 }) //注入插件（定位插件，地理编码插件)amap.plugin(['AMap ."地理定位“，AMap .Geocoder']) //定位this.currentPosition(amap，lnglat) }，currentPosition (map，lnglat) { if (lnglat) { //有传入坐标点，直接定位到坐标点地图。设置中心。addmark(map，lnglat) //获取地址这个。GetAddress(ln glat)} else {//没有传入坐标点，则定位到当前所在位置让地理定位=新的AMap .地理位置({ enablehighlight精确度： true，timeout: 10000，zoomToAccuracy: true，buttonPosition: 'RB' })地理位置。getCurrentPosition((状态，结果)={ if(状态==='完成'){ 0让点=[结果.位置. lng，结果。位置。地图。设置中心(点)//设置中心点this.addMark(地图，点)//添加标记//存下坐标与地址这个。点=指出这一点。GetAddress(points)} else { console。日志('定位失败，结果)} }) } },//添加标记addMark(地图，点){让标记=新AMap .标记({ map: map，position: points，draggable: true，//允许拖动cursor: 'move '，raiseOnDrag: true })标记。on('dragend '，(e)={ let position=marker。getposition()//存下坐标与地址这个点=[位置，位置。这个。get address([位置。液化天然气，位置。lat]))} }，//根据坐标返回地址（逆地理编码)getAddress(点数){ 0让地理编码器=新AMap .地理编码器({半径： 1000 })地理编码器。GetAddress(分)，(状态，结果)={ if(状态==' complete '结果。regeocode){ this。地址=结果。regeocode。formatedaddress } })}，commit () { this .$emit('location '，this.point，this。address)} }/script style lang=' SCS '作用域。地图框{框大小：边框框；背景色： # DDD；padding: 15px:在{内容： }之后；显示器：块；clear:两者；} .阿玛普。细节{左侧浮动：高度： 100%;} .AMAP {宽度： 75%；} .细节{宽度：25%；背景-color : # fff；padding: 0 15px边框-左侧： 1px实心# eee盒子尺寸：边框盒子；单词包装：断字；} .BTN地图{宽度： 100%；margin : 30px 0 0 0 padd : 5px 0；color: # fffcursor:指针；背景色： # 409 effborder:无；边界半径： 3px:悬停{背景色： # 66b1ff} } }/样式四、调用组件

template div class=' box ' xmap width=' 700 px ' height=' 500 px ' : linglat='[114.433703，30.446243]' @ location=' location '/xmap/div/templatescript import xmap from ' @/components/map ' export default { components : { xmap }，Methods : { location(点，地址){alert(`坐标：${point[0]}，$ { Methods

以上是边肖介绍的Vue组件的高科技地图地址选择功能的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！