@wintoo/vue-amap-plus

使用

• 安装

npm install -S @wintoo/vue-amap-plus

• 快速上手

在 Vue项目文件入口中引入 @wintoo/vue-amap-plus

// main.ts
import VueAMapPlus, { VueAmapPlusOptions } from '@wintoo/vue-amap-plus';
import '@wintoo/vue-amap-plus/dist/style.css'
// 添加高德地图类型声明
import '@wintoo/vue-amap-plus/types/index.d.ts'

const options: VueAmapPlusOptions = {
  key: 'YOUR_KEY',
  v: '2.0',
  plugins: []
};
Vue.use(VueAMapPlus, options);

• Volar 支持

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["@wintoo/vue-amap-plus/types/global"]
  }
}

项目支持.d.ts类型声明文件，在vite.config.ts添加如下配置

export default defineConfig({
  plugins: [vue()],
  resolve: {
    extensions: ['.ts', '.d.ts'],
  },
});

特别注意：如果出现如下错误

TypeError：Cannot read properties of null (reading 'isCE')

可能是vue脚手架版本问题，也可能是我这个项目中nod_module太多了，在vue3测试项目中的vue.config.js文件中需要加入下面配置，才能确保vue引用的是正确的，所以解决这个问题要修改这两个地方！

使用普通版本的vue3：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    preserveSymlinks: false,
    alias: {
      vue: path.resolve('./node_modules/vue')
    }
  }
})

使用高版本的vue3：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    preserveSymlinks: false,
    alias: {
      vue: path.resolve('./node_modules/vue', 'dist', 'vue.runtime.esm-bundler.js')
    }
  }
})

在组件中引入地图组件, 注意，地图组件父元素需设置宽高，地图才能正常显示

<template>
	<div class="map-container">
      <amap-map></amap-map>
    </div>
</template>

<style>
.map-container {
    height: 400px;
    width: 100%
}
</style>

组件列表总览

已实现的组件

地图

• 地图组件 amap-map

<div class="map-container">
  <amap-map></amap-map>
</div>

覆盖物

• 点标记 amap-marker
• 文本标记 amap-text
• 圆形 amap-circle
• 圆点标记 amap-circle-marker
• 折线 amap-polyline
• 多边形 amap-polygon
• 信息窗体 amap-infowindow
• 矩形 amap-rectangle
• 椭圆 amap-ellipse
• 海量点标记 mass-marks
• 标注及标注图层 amap-labels-layer、amap-label-marker

图层

• 路网图层 amap-roadnet
• 卫星图层 amap-satellite
• 标准图层 amap-tilelayer
• 交通图层 amap-traffic
• 楼快图层 amap-buildings

插件

• 地图控件 amap-controlbar
• 图层切换 amap-maptype
• 比例尺 amap-scale
• 工具条 amap-toolbar
• 鹰眼 amap-overview
• 折线编辑插件 amap-polyline-editor
• 多边形编辑插件 amap-polygon-editor
• 矩形编辑插件 amap-rectangle-editor
• 圆形编辑插件 amap-circle-editor
• 椭圆编辑插件 amap-ellipse-editor

Loca 数据可视化

• 图层的容器和控制器 loca
• 基本热力图 loca-heatmap
• 蜂窝热力图 loca-hexagon

未实现的组件

高德地图 JS API 加载

• 顺序同步加载

与高德官方一致，在 Vue项目 public/index.html文件中引入

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

• 异步加载

不在 public/index.html文件中引入，在 main.js 中，此时会以异步的方式加载 JS API

import Vue from 'vue';
import VueAMap from '@wintoo/vue-amap-plus';

const options = {
  key: 'YOUR_KEY',
  v: '1.4.15',
  plugins: []
};
Vue.use(VueAMap, options);

VueAmap API

• AMap 对象获取, amapLoader

<script>
  import { amapLoader } from '@wintoo/vue-amap-plus'
  export default {
    mounted(){
      amapLoader.then(AMap => {
        // code
        console.log(AMap)
      })
    }
  }
</script>

• Loca 对象获取

<script>
  import { locaLoader } from '@wintoo/vue-amap-plus'
  export default {
    mounted(){
      locaLoader.then(Loca => {
        // code
        console.log(Loca)
      })
    }
  }
</script>