msa-base-amap

npm downloads:

msa-base-amap 是一个基于 React 封装的高德地图组件；帮助你轻松的接入地图到 React 项目中。除了必须引用的 Map 组件外，我们目前提供了最常用的 10 个地图组件，能满足大部分简单的业务场景；如果你有更复杂的需求，或者觉得默认提供的组件功能不够，你完全可以自定义一个地图组件，然后根据高德原生 API 做高德允许你做的一切事情。 Map组件有两个必传的参数 瓦片地址 + 高德地图js地址 通常情况下 此组件以海图形式展现 (不管是海图还是地图) 只需要将对应的瓦片地址url传入Map组件即可

<Map 
  tilesUrl='https://www.yagena.net/tiles/1/[z]/[y]/[x].png' 
  scriptUrl='http://192.168.2.250:9999/amap.1.4.6/js/amap.js' 
/>

扩展组件

msa-base-amap 拥有了组件的扩展能力。如果 msa-base-amap 中已有的组件不能满足你的业务需求，你可以使用自己写的地图组件；

在你的组件中，可以通过 props 访问到创建好的高德地图实例，以及地图的 div 容器；拥有访问这两个属性的能力后，你可以根据高德原生 API 做高德允许你做的一切事情。实际上，msa-base-amap 中的其他组件就是这么做的。

如何在项目中接入 msa-base-amap;

安装

npm install --save msa-base-amap

npm 用法

<div id="app"></div>

#app {
  width: 600px;
  height: 400px;
}

import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'msa-base-amap';

ReactDOM.render(
  <Map 
    tilesUrl='https://www.yagena.net/tiles/1/[z]/[y]/[x].png'
    scriptUrl='http://192.168.2.250:9999/amap.1.4.6/js/amap.js'
  />,
  document.querySelector('#root')
)

也可以手工引入你需要的组件：

import Map from 'msa-base-amap/lib/map';
import Marker from 'msa-base-amap/lib/marker';
// ... your other code

以上为简单场景的应用。 tips: Map 组件的父元素须设置高度和宽度。