shu-c-amap

1.0.24版本是为了支持 高德地图 安全密钥配置，JS API 安全密钥使用 ，新增两个配置参数securityJsCode和securityJsProxyTarget两个选择其中一个配置。

注意： 对应高德地图版本为 1.4.15，2.0 版本暂未进行适配。

封装的地图组件：

• 基础地图 base-amap
• marker标记 base-amap-marker
• 简易行政图 base-amap-district-explorer
• 行政图 base-amap-district
• 热力图 base-amap-heat-map
• 文字text标记 base-amap-text
• 海量点标记 base-amap-mass-marks
• 信息展示窗体 base-amap-info-window
• 点聚合 base-amap-marker-clusterer
• 圆circle标记 base-amap-circle-marker
• 多边形Polygon base-amap-polygon
• 折线Polyline base-amap-polyline
• 输入提示与POI搜索 base-amap-search-box

安装和快速上手

npm 安装

安装依赖包

• shuCAMap

npm i shu-c-amap --save

• vue

npm i vue2.6.11 --save

• lodash （帮助函数插件）

lodash如果使用的是脚手架那么可能脚手架已经帮你安装了（比如：Vue CLI）。

npm i lodash --save

CDN

CDN 版本未构建。

快速上手

在 main.js 中写入以下内容：

import Vue from 'vue';
import { BaseAMap } from 'shu-c-amap';

Vue.use(BaseAMap);
BaseAMap.initAMapApiLoader({
  key: 'xxxx', // 高德地图密钥
  plugin: [
    'Map3D',
    'DistrictSearch',
    'Loca',
    'DistrictLayer',
    'SimpleMarker',
    'DistrictExplorer',
    'AMap.MarkerClusterer' // 聚合点
    // 'ToolBar',
    // 'MapType',
    // 'OverView'
  ], // 插件
  securityJsCode: '安全密钥明文', // 快速配置，无需使用nginx作为代理服务器但安全性较低密钥直接暴露在页面
  securityJsProxyTarget: '你的代理服务器域名或地址，比如： 【http://127.0.0.1:5015】', // `/_AMapService` 代理后缀名会在插件中自动增加至代理域名的后面
  v: '1.4.15', // JSAPI 版本号
  uiVersion: '1.0' // UI组件库 版本号
});

new Vue({
  render: h => h(App)
}).$mount('#app')

Browsers support

Modern browsers and IE10.

| IE / Edge | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | | IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

last 2 versions 每个浏览器最新的两个版本

Contributors

This project exists thanks to all the people who contribute.

zhangh-design