vue中引入高德地图

❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️

总的来说，vue组件中使用高德地图的方式有两种，一种是vue-amap ：一套专门用于vue的高德地图插件；另外一种是原生的高德地图。

方式一、vue-amap：

官网API：直达车

(1)、安装依赖：

npm install vue-amap -S

或者淘宝镜像：

cnpm install vue-amap --save

亦或（CDN的方式获取最新版本的资源）：

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>

(2)、按需引入：（单个组件中使用没必要占用资源在main.js中引用）

其中密钥申请的位置：key

import VueAMap from 'vue-amap';
Vue.use(VueAMap);// 初始化高德地图的 key 和插件
VueAMap.initAMapApiLoader({key: 'c76c4e9a861fe1f715c48d893d07116b',plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],v: '1.4.4'
});

(3)、创建地图实例：

(4)、完整代码：

<template><div class="amap-page-container"><el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo"></el-amap><div class="toolbar"><button @click="getMap()">get map</button></div></div></template><style>.amap-demo {height: 300px;}</style><script>// NPM 方式// import { AMapManager } from 'vue-amap';// CDN 方式let amapManager = new VueAMap.AMapManager();module.exports = {data: function() {return {amapManager,zoom: 12,center: [121.59996, 31.197646],events: {init: (o) => {console.log(o.getCenter())console.log(this.$refs.map.$$getInstance())o.getCity(result => {console.log(result)})},'moveend': () => {},'zoomchange': () => {},'click': (e) => {alert('map clicked');}},plugin: ['ToolBar', {pName: 'MapType',defaultType: 0,events: {init(o) {console.log(o);}}}]};},methods: {getMap() {// amap vue componentconsole.log(amapManager._componentMap);// gaode map instanceconsole.log(amapManager._map);}}};
</script>

效果：

方式二：SDK原生的方式引入高德地图：

(1)申请密钥key：密钥申请直通车

(2)vue.config.js中引入：

module.exports = {// 是否为生产环境构建生成 source map？productionSourceMap: false,configureWebpack: {externals: {"AMap": "AMap"}},// webpack-dev-server 相关配置devServer: {// host: "localhost",open: true,port: 8001,overlay: {errors: false,warnings: false}}
}

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ec817c7d9a73dae44ddbb6eb9d032a00"></script>

(3)、完整代码：

<template><section>      <div id="container" style="width:100%; height:680px; margin-top: 20px"></div></section>
</template><script>import AMap from 'AMap'export default {name: "home",data() {return {}},methods: {init() {var map = new AMap.Map('container', {resizeEnable: true,})AMap.plugin(['AMap.ToolBar', 'AMap.OverView', 'AMap.MapType', 'AMap.Scale', 'AMap.Geolocation'], function () { //异步加载插件var geolocation = new AMap.Geolocation({// 是否使用高精度定位，默认：trueenableHighAccuracy: true,// 设置定位超时时间，默认：无穷大timeout: 10000,// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)buttonOffset: new AMap.Pixel(10, 20),// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsezoomToAccuracy: true,// 定位按钮的排放位置, RB表示右下buttonPosition: 'RB'})map.addControl(new AMap.ToolBar());map.addControl(new AMap.OverView());map.addControl(new AMap.MapType());map.addControl(new AMap.Scale());map.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', (e) => {// console.log(e) // 定位成功之后做的事// 定位成功之后再定位处添加一个markervar marker = new AMap.Marker({position: [e.position.lng, e.position.lat], // （e.position）--->定位点的点坐标, position ---> marker的定位点坐标，也就是marker最终显示在那个点上，})map.add(marker);})})var geocoder, marker;function regeocoder(lnglatXY, that) {AMap.plugin('AMap.Geocoder', function () {var geocoder = new AMap.Geocoder({radius: 1000,extensions: "all"});geocoder.getAddress(lnglatXY, function (status, result) {if (status === 'complete' && result.info === 'OK') {var address = result.regeocode.formattedAddress;that.ruleForm.addr = address;// let contentString = '<div class="cafe-info-window">' +//     '<div class="cafe-name">' + result.regeocode.addressComponent.province + result.regeocode.addressComponent.city + '</div>' +//     '<div class="cafe-address">' +//     '<span class="street">' + result.regeocode.addressComponent.district + '</span>' +//     '<span class="city">' + result.regeocode.addressComponent.township + '</span> ' +//     '<span class="state">' + result.regeocode.addressComponent.street + '</span>'// '</div>' +// '</div>'// let contentString = result.regeocode.formattedAddress;// var infoWindow = new AMap.InfoWindow({//     content: contentString//信息窗体的内容// })// infoWindow.open(map, marker.getPosition()); //信息窗体打开}});if (!marker) {marker = new AMap.Marker();map.add(marker);}marker.setPosition(lnglatXY);})}var that = thismap.on('click', function (e) {var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];regeocoder(lnglatXY, that)that.ruleForm.long = e.lnglat.getLng()that.ruleForm.lat = e.lnglat.getLat();});},},mounted() {},activated() {this.init();},deactivated() {}}
</script><style scoped>* {padding: 0;margin: 0;}#map {margin-top: 20px;height: 680px;}
</style>

效果：

朋友，你想知道vue中怎么使用百度地图吗，请看：

vue+element中引入百度地图

vue中引入高德地图相关推荐

vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
在vue中引入高德地图
既然要用到高德地图首先要申请成为高德地图开发者,并申请使用高德地图的key这两点在这篇文章就不过多赘述,有需要的小伙伴可以查查资料,或者去高德地图api官网都有很详细的介绍.高德地图官网简单提一下申 ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
vue中引入高德js
项目概述: 通过在vue中引入高德js,实现地图的加载呈现,以及在地图中实现设备坐标定位,并在设备列表点击的同时进行定位点的切换和地图视图的切换,在点击坐标点的时候可以弹出相关介绍信息. 第一步:在i ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...