vue-cli中使用高德地图的方法示例

第一步去高德地图开放平台申请密钥高德地图开放平台

第二部在脚手架项目目录结构

里面多了配置文件夹和实用工具文件夹

config.js里面是这样的主要是导出密钥

//高德地图keyexport const MapKey='你的密钥键'//地图限定城市'导出' const MapCityName='武汉实用工具文件夹里面新建路一个remoteLoad.js

主要是动态创建脚本标签封装了一个函数传入统一资源定位器地址()

导出默认函数remoteLoad (url，hasCallback){ return create script(URL)/* * *创建脚本* @参数url * @返回{ Promise } */函数创建脚本(URL){ var script元素=文档。创建元素(“脚本”)文档。尸体。appendchild(脚本元素)var Promise=new Promise((解析，拒绝)={ script元素。addeventlistener(' load ')，e={ removeScript(script元素)if(！hasCallback) { resolve(e) } }，false)脚本元素。addeventlistener(' error '，e={ removeScript(script元素)reject(e)}，false) if (hasCallback) { window .____回调_ _ _ _=function(){ resolve()}窗口。____回调_ _ _ _=null } } })if(hasCallback){ URL=' callback=_ _ _ _ callback _ _ _ _ ' }脚本元素。src=URL返回承诺}/* * *移除脚本标签* @ param脚本元素脚本DOM */函数移除脚本(脚本元素){ document。尸体。移除子级(脚本元素)} }第三步在主页组件中

模板div class=' m-map ' div class=' search ' v-if=' place search '输入类型=“文本”占位符='请输入关键字v-model='searchKey '按钮类型='按钮' @点击='手柄搜索'搜索/button div id=' js-result ' v-show=' search key ' class=' result '/div/div div id=' js-container ' class=' map '/div/div/template script从' @/utils/remote load导入远程加载。js ' import { MapKey，mapcity name } from ' @/config/config ' export default { props 3360[' lat '，' lng']，data(){ return { search key 3360 ' '，placeSearch: null，dragStatus:搜索handleSearch(){ if(this。搜索关键字){这个。地点搜索。搜索(这个。搜索关键字)} }，//实例化地图initMap () { //加载位置选择器，加载界面的路径参数为模块名中' ui/'之后的部分让AMapUI=这个AMapUI=窗口AMapUI .让AMap=这个AMap=窗口AMap amapui。Loadui([' misc/position picker ']，position picker={ let Mapconfig={ zoom : 16，city name : mapcity name } if(this。今年晚些时候。液化天然气){ mapConfig。center=[这个。让地图=新的AMap .Map('js-container '，mapConfig) //加载地图搜索插件AMap.service('AMap .PlaceSearch '，()={ this.placeSearch=new AMap .PlaceSearch({ pageSize: 5，pageIndex: 1，citylimit: true，city: MapCityName，map: map，panel: 'js-result' }) }) //启用工具条AMap.plugin(['AMap .ToolBar']，function () { map.addControl(新AMap .ToolBar({ position : ' RB ' }))})//创建地图拖拽让位置选取器=新位置选取器({ mode : '拖动地图'，//设定为拖拽地图模式，可选dragMap '，' dragMarker '，默认为dragMap' map: map /依赖地图对象}) //拖拽完成发送自定义拖事件positionPicker.on('成功，位置结果={ //过滤掉初始化地图后的第一次默认拖放if(！这个。拖动状态){这。拖动状态=true }否则{ this .$emit('drag '，positionResult) } }) //启动拖放positionPicker.start() }) })，async created () { //已载入高德地图原料药，则直接初始化地图如果(窗口AMap .窗口AMapUI) { this.initMap() //未载入高德地图原料药，则先载入应用程序接口再初始化} else { await RemoteLoad(` http://web API。AMAP。com/maps？v=1.3键=$ { MapKey } `)等待RemoteLoad(' http://web API。AMAP。com/ui/1.0/main。js’)这个。initMap()} } }/脚本样式lang=' CSS ' .m图{最小宽度： 500像素；最小高度： 300像素；相对位置：}.地图。地图{宽度： 100%；高度： 100%;}.地图。搜索{位置：绝对值；top: 10pxleft: 10px宽度： 285像素；z-index : 1；}.地图。搜索输入{ width: 180pxborder: 1px固体# ccc线高： 20pxpadding: 5pxoutline:无；}.地图。搜索按钮{行高： 26px背景# fffborder: 1px固体# ccc宽度： 50px文本对齐：中心；}.地图。结果{最大高度： 300像素；飞越：汽车；页边距-top : 10px；}/样式第四步在app.vue中导入组件

模板div id=' app ' div class=' g-wrapper ' div class=' m-part ' MapDraw @ DragMap @ DragMap=' mapbox '/MapDraw/div/div/templatescript import MapDraw from ' ./组件/家庭。vue ' export default { name : ' app '，components: { mapDrag }，data(){ return { drag data : { LNG : null，lat: null，address: null，nearestJunction: null，nearestPOI: null } }，methods 3: { drag DAP(data){ console。记录(数据)这个。拖动数据={方法.}.页眉{ color: # fff文本对齐：中心；背景技术；背景-image :-web kit-linear-gradient(330度，#155799，# 159957)；背景-图像：线性梯度(120度，#155799,# 159957);padding: 3rem 4rem边距-底部： 30px}.页首h1 { margin : 0；font-size : 40px}.页眉p { color : # cccmargin : 0；边距-底部： 30px}.页眉{ display : inline-block；border: 1px实心# fffmargin-right : 10px；线高： 40pxpadd : 0 20pxborder-半径： 4pxcolor: # fff文本装饰：无；transition: all .3s }。页眉：悬停{背景： # fffcolor: # 333}。g-wrapper {宽度： 1000 pxmargin : 0 auto color : # 666 font-size : 16px；线高： 30px}.m部分{边距-底部： 30px}.{内容： }之后的m-零件：显示器：块；clear:两者；}.m部分title { font-size : 30px线高： 60px边距-底部： 10pxcolor: # 333}。m部分mapbox { width: 600px高度： 400像素；边距-底部： 20px向左浮动：}.m部分。信息{ margin : 0；padd : 0；列表样式：无；线高： 30px边距-左侧： 620像素；}.m部分信息跨度{ display:块；color: # 999}。m零件ol {行高： 40px左边距-: 0;左填充： 0;}.m零件预{ padding: 10px 20px线高： 30px边界半径： 3pxbox-shadow: 0 0 15px rgba(0，0，0，5);}.间位页脚{ background: # eee线高： 60px文本对齐：中心；color : # 999 font-size : 12px；}.间位页脚a { margin : 0 5pxcolor : # 999文本装饰：无；}/样式上面地图初始化渲染的方法直接拿别人封装好的东西

最后运行后

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。