vue-cli调用高德地图api

注册开发者账号并获得Key

1、进入官网https://lbs.amap.com/，注册并登录
2、登陆之后，点击控制台进入 [ 应用管理 ] 页面 [ 创建新应用 ]

3、获得应用 Key值，[ 服务平台 ]一项选择 [ Web 端 ( JSAPI )或 Web 服务 ]

原生的方式引入

封装remoteLoad.js
在vue-cli项目目录结构新增utils文件夹，utils文件夹里面，新建一个remoteLoad.js，主要是动态创建script标签，封装了一个函数传入URL地址

export default function remoteLoad (url, hasCallback) {return createScript(url)/*** 创建script* @param url* @returns {Promise}*/function createScript (url) {var scriptElement = document.createElement('script')document.body.appendChild(scriptElement)var promise = new Promise((resolve, reject) => {scriptElement.addEventListener('load', e => {removeScript(scriptElement)if (!hasCallback) {resolve(e)}}, false)scriptElement.addEventListener('error', e => {removeScript(scriptElement)reject(e)}, false)if (hasCallback) {window.____callback____ = function () {resolve()window.____callback____ = null}}})if (hasCallback) {url += '&callback=____callback____'}scriptElement.src = urlreturn promise}/*** 移除script标签* @param scriptElement script dom*/function removeScript (scriptElement) {document.body.removeChild(scriptElement)}
}

定义组件

 <template><div class="m-map"><div id="js-container" class="map"></div></div></template><script>const MapKey = '5187e3f6db9301694f086c16f4082c94'  //获取的Key值import remoteLoad from '../utils/remoteLoad.js'export default {name: "MapDrag",props: {currentPosition:Array,default:[]},data () {return {dragStatus: false,AMapUI: null,AMap: null,}},methods: {// 实例化地图initMap() {// 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分let AMapUI = this.AMapUI = window.AMapUIlet AMap = this.AMap = window.AMapAMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {let mapConfig = {zoom: 12, //缩放比例center: this.currentPosition, //设置地图中心点坐标mapStyle: 'amap://styles/macaron',  //设置地图的显示样式,可在高德地图中设置自定义地图，mapStyle: 'amap://styles/自定义地图id'}let map = new AMap.Map('js-container', mapConfig)// 启用工具条AMap.plugin(['AMap.ToolBar'], function () {map.addControl(new AMap.ToolBar({position: 'RB'}))})// 创建地图拖拽let positionPicker = new PositionPicker({mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'map: map // 依赖地图对象})// 拖拽完成发送自定义 drag 事件positionPicker.on('success', positionResult => {// 过滤掉初始化地图后的第一次默认拖放if (!this.dragStatus) {this.dragStatus = true} else {this.$emit('drag', positionResult)}})// 启动拖放positionPicker.start()})}},watch: {currentPosition(){this.initMap()}},async mounted () {// 已载入高德地图API，则直接初始化地图if (window.AMap && window.AMapUI) {this.initMap()// 未载入高德地图API，则先载入API再初始化} else {// 载入高德地图和UI组件await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')this.initMap()}}}</script><style >   .m-map{ width: 100%; height: 100%; position: relative; }.m-map .map{ width: 100%; height: 100%; }</style>

调用组件

import MapDrag from '../components/MapDrag'//currentPosition: [103.775279, 30.683501]  当前经纬度<MapDrag @drag="dragMap" class="mapbox" :currentPosition="currentPosition"></MapDrag>//拖拽地图dragMap (data) {this.dragData = {lng: data.position.lng,lat: data.position.lat,address: data.address,nearestJunction: data.nearestJunction,nearestRoad: data.nearestRoad,nearestPOI: data.nearestPOI}},

效果图

@amap/amap-jsapi-loader引入

安装依赖@amap/amap-jsapi-loader

yarn add @amap/amap-jsapi-loader

设置全局样式，隐藏logo

.amap-logo {display: none!important;visibility: hidden!important;
}
.amap-copyright {display: none!important;visibility: hidden!important;
}

封装组件

<template><div class="home_div"><div id="container"></div></div>
</template><script>
import AMapLoader from "@amap/amap-jsapi-loader";export default {data() {return {};},methods: {initAMap() {AMapLoader.load({key: "3862bb74758c8d185100ed5df030949d", //设置您的keyversion: "2.0",plugins: [],AMapUI: {version: "1.1",plugins: ["control/BasicControl"],},Loca: {version: "2.0",},}).then((AMap) => {this.map = new AMap.Map("container", {rotateEnable: true,pitchEnable: true,zoom: 9,zooms: [5, 20],center: [103.762273, 30.697175],//中心点坐标resizeEnable: true, //是否监控地图容器尺寸变化// showLabel: false,//是否显示标注mapStyle: "amap://styles/darkblue", //地图样式});this.getStatisticsData()}).catch((e) => {console.log(e);});}},mounted() {this.initAMap();}
};
</script>
<style lang='less'>
.home_div {padding: 0px;margin: 0px;width: 100%;height: 100%;position: relative;
}#container {padding: 0px;margin: 0px;width: 100%;height: 100%;position: absolute;
}
</style>

调用组件

import amapfrom '../components/amap'<amap></amap>

效果图

vue-cli调用高德地图api相关推荐

python调用高德地图api 可视化_Python：利用高德地图API实现找房
记:本项目是在实验楼上看到的,但是上面的代码由于没有及时维护,爬虫文件的代码不再能完整的把所有房源信息爬取下来,我根据最新的58同城官网进行了研究,现在的官网的房源信息已经不是分页的了,而是拉到最后自 ...
java获取经纬度_java调用高德地图api获取某个位置的经纬度
java调用高德地图api获取经纬度的方法,废话少说,直接上代码: import com.fasterxml.jackson.databind.JsonNode; import com.ning.ht ...
调用高德地图Api实现通过地址转经纬度
调用高德地图Api实现通过地址转经纬度在高德地图开放平台注册一个key就可以了,链接在这儿高德地图开放平台 /*** @author _沉淀_* @version 1.0.0* @ClassName ...
Python调用高德地图API实现经纬度换算、地图可视化
作者 | 糖甜甜甜出品 | 经管人学数据分析 Python调用高德地图API实现经纬度换算.地图可视化前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地 ...
python 根据经纬度调取和显示地图_Python调用高德地图API实现经纬度换算、地图可视化-站长资讯中心...
目前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请 ...
你还在为高德地图找不到门牌号等详细地址而烦恼吗？你还在等什么——Python调用高德地图API实现经纬度换算、地图可视化
Python调用高德地图API实现经纬度换算.地图可视化前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出 ...
python调用高德地图api 可视化_Python调用高德地图API实现经纬度换算、地图可视化...
前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请密 ...
Java调用高德地图API根据详细地址获取经纬度
Java调用高德地图API根据详细地址获取经纬度官方API:https://lbs.amap.com/api/webservice/guide/api/georegeo * Web服务API 地理/ ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...
如何调用高德地图api
首先注册成为高德地图开发者,创建应用后申请key. 1.引入高德地图API <script type="text/javascript" src="http://w ...

vue-cli调用高德地图api

原生的方式引入

@amap/amap-jsapi-loader引入

vue-cli调用高德地图api相关推荐

最新文章

热门文章