enn-amap-sdk v1.0.20

EnnAmapSdk 使用手册

目前看来当本地使用 mockjs 拦截接口时，会出现地图无法正常展示的情况，高德和 mockjs 不兼容，请酌情关闭 mockjs

安装

直接安装 (推荐)

直接安装

npm install enn-amap-sdk

或者

yarn add enn-amap-sdk

如果安装遇到问题 或者设置了代理 可尝试
npm install --save-dev "enn-amap-sdk" --no-proxy
所有 demo 案例可以参照 node_modules 里面 enn-amap-sdk 目录下 examples

项目引入

1、CDN 引入

<script src="xxx/enn-amap-sdk.min.js"></script>
<script>
  let map = null
  let map2 = null
  EnnAmapSdk.load({
    key: '', // 申请好的Web端开发者Key，首次调用 load 时必填 例如：7ccff3eb9b5beb5b5eadb4f1a0ba7868
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    Loca: {
      // 是否加载 Loca， 缺省不加载
      version: '2.0.0' // Loca 版本，缺省 1.3.2
    }
  }).then(() => {
    map = EnnAmapSdk.initMap('map', {
      zoom: 13, // 缩放等级
      center: [121.638332, 31.165338] // 中心位置
    })
    map2 = EnnAmapSdk.initMap('map', {
      zoom: 10, // 缩放等级
      center: [121.638332, 31.165338] // 中心位置
    })
    // Todo
    // 开始你的表演
    // EnnAmapSdk sdk封装的集成方法对象
    // $ennAMap 表示 map 实例对象
  })
</script>

2、import

import EnnAmapSdk from 'enn-amap-sdk'
let map = null
EnnAmapSdk.load({
  key: '7ccff3eb9b5beb5b5eadb4f1a0ba7868', // 申请好的Web端开发者Key，首次调用 load 时必填
  version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  Loca: {
    // 是否加载 Loca， 缺省不加载
    version: '2.0.0' // Loca 版本，缺省 1.3.2
  }
}).then(() => {
  map = EnnAmapSdk.initMap('map', {
    zoom: 13, // 缩放等级
    center: [121.638332, 31.165338] // 中心位置
  })
  // 支持初始化多个map实例
  // Todo
  // 开始你的表演
  // EnnAmapSdk sdk封装load initMap等方法
  // map 表示 map 实例对象 挂载了封装的集成方法对象
})

vue3 使用注意点

// 在 Vue3 中使用以下方式：

// 首先需要引入 Vue3 的 shallowRef 方法（使用 shallowRef 进行非深度监听，因为在 Vue3 所使用的 Proxy 拦截操作会改变 JSAPI 原生对象，所以此处需要区别 Vue2 使用方式对地图对象行非深度监听，否则会出现问题，建议 JS API 相关对象采用非响应式的普通对象来存储）。
const map = shallowRef(null)
this.map = EnnAmapSdk.initMap('map', {
  zoom: 13, // 缩放等级
  center: [121.638332, 31.165338] // 中心位置
})

api 手册 + demo 案例

所有 api 说明可以参照 node_modules 里面 enn-amap-sdk 目录下 doc
所有 demo 案例可以参照 node_modules 里面 enn-amap-sdk 目录下 examples

注意 2021-12-02 后申请的高德地图 key 需要配合秘钥

可参照：https://lbs.amap.com/api/jsapi-v2/guide/abc/load
密钥请联系对应产品经理索要

自定义地图服务代理

location /_AMapService/v4/map/styles {
    set $args "$args&jscode=密钥";
    proxy_pass https://webapi.amap.com/v4/map/styles;
}
# 海外地图服务代理
location /_AMapService/v3/vectormap {
    set $args "$args&jscode=密钥";
    proxy_pass https://fmap01.amap.com/v3/vectormap;
}
# Web服务API 代理
location /_AMapService/ {
    set $args "$args&jscode=密钥";
    proxy_pass https://restapi.amap.com/;
}