vuemap/vue-amap 是一套基于 Vue和高德地图的地图组件，当前支持vue2和vue3。
该版本对原 vue-amap 组件进行升级，主要适配 amap2.0 相关的接口，同时调整事件绑定形式，调整为使用 v-on 进行事件绑定。
组件中对高德可视化组件 loca 进行封装，同时提供基础的 ThreeJS 能力，可以正常加载 GLTF 模型，获取模型对象进行细节控制。
该项目基于 https://github.com/ElemeFE/vue-amap/ 进行二次开发
快速上手
// 引入vue-amap
import VueAMap from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: 'YOUR_KEY',
});
//如果需要使用自定义的threeJS相关的组件，需要格外引入库中的three。该包只提供常用的模型加载，灯光，HDR等相关能力，更细致的控制需要在模型初始化后获取对象进行操作
import VueAmapThree from '@vuemap/vue-amap/dist/three'
Vue.use(VueAmapThree);
示例
<template>
<div class="amap-page-container">
<el-amap ref="map" map-style="amap://styles/62009be025f187dd3eafe327d2e55b8e" :center="center" :zoom="zoom" view-mode="3D" @init="initMap" @click="clickMap" class="amap-demo">
</el-amap>
<div class="toolbar">
<button @click="getMap()">获取map实例</button>
</div>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
return {
zoom: 12,
center: [121.59996, 31.197646],
};
},
methods: {
getMap() {
console.log(this.$refs.map.$$getInstance());
},
clickMap(e){
console.log('click map :', e );
},
initMap(e){
console.log('init map: ', e);
}
}
};
</script>
-
internal/modules/cjs/loader.js:985 throw err; ^ Error: Cannot find module '@vue/cli-plugin-eslint' Require stack: - C:\Users\lenovo\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.j
-
一、前提 项目开发中，需要用到vue-amap插件的情况，但此时项目里的全局引用已经引用了高德地图2.0版本，而vue-amap只支持1.4.15（该插件作者已经很久没有维护了，不必要情况建议使用原生高德地图或者是amap-vue，注意vue-amap和amap-vue是两款插件）会产生必然的兼容问题 vue-amap文档：vue-amap文档 amap-vue文档：介绍 | AM
-
<script> export default { watch: { itemId(val) { // 移除地图上的图层，如果不移除的话，只要切换过的项目，项目上的设备、监控，都会全部显示出来（即地图上保留了上一次设备、监控的图层） if (this.clusterList && this.clusterList.length) {
-
官方文档：https://jimnox.gitee.io/amap-vue/references/map/ Amap是封装好的高德地图组件，易于使用。但私心说一句，不熟悉高德地图原生API的话，Amap-vue的官方文档对新手来讲不是很细致，还是多参考高德官方文档，对照着学习。 安装： npm install --save @amap/amap-vue main.js import AmapVu
-
在vue中使用了vue-amap给信息窗口增加点击事件和样式 在vue-amap中给信息窗口增加点击事件content属性是不行了，template又一直报错，那怎么办呢？当然是简单便捷的slot啦！ 直接上代码 <el-amap-info-window position="window.position" :offset="window.offset" :visible="wind
-
1.注册成为开发者 -》 申请秘钥key 调用高德api 高德地图开放平台：https://lbs.amap.com/?ref=https://console.amap.com/dev/index 此处有详细步骤：(注：有些功能-》申请的 key 必须配备安全密钥 jscode 一起使用) 此处有详细步骤：Vue（vue-amap） 接入高德地图获取坐标与地址信息_Your-Nikee的博客-C
-
首先安装amap-jsapi-loader npm i amap-jsapi-loader --save 然后在utils中创建amap.js,注意AMapKey是申请高德地图账号后，配置引用的key import AMapLoader from '@amap/amap-jsapi-loader'; import {AMapKey} from './const-datas' const ins
-
vue-amap 是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。 数据状态与地图状态单向绑定 开发者无需关心地图的具体操作 安装 npm install -S vue-amap 快速上手 引入vue-amap // 引入vue-amapimport VueAMap from 'vue-amap';Vue.use(VueAMap);// 初始化vue-amapVueAMap.init
-
vue-amap 是一套基于 Vue 2.0 和高德地图的地图组件。
-
react-amap 是一个基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。 文档实例预览: 文档网站 特性 - ♻️ 自动加载高德地图 SDK（通过创建 Script 标签的形式加载），包括第三方 SDK。 - �� 使用 Typescript 编写，集成高德地图 SDK [@type](src/types) 声明文件（包括中文注释）。 - ⚛️ 支持 Reac
-
根据高德地图行政区域查询API获取最新的所有的行政区域数据，用于省市区街道级联查询。 高德地图行政区域查询 - http://lbs.amap.com/api/webservice/guide/api/district 本项目基于高德地图行政区域查询API, 由于高德地图行政区域查询API有调用次数和并发数量限制，故将行政区域数据保存在数据库中，需要时从本地数据查询获取。 目前部分城市和省直辖县因
-
npm install @amap/amap-js-kml包如何下载？ 一直下载都不成功
-
如果您在声明组件时更喜欢基于类的 API，则可以使用官方维护的vue-class-component装饰器： import Vue from 'vue' import Component from 'vue-class-component' // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ // 所有的组件选项都可以放在这里 template: