yarn add amap-drill -S
// or
npm install amap-drill -S
首先引入 amap
<script src="https://webapi.amap.com/maps?v=1.4.15&key=yourkey&plugin=AMap.DistrictLayer"></script>
或者使用提供的获取 AMap 的工具函数
import { getAMap } from 'amap-drill'
async function init() {
const AMap = await getAMap({ key: 'yourMapKey' })
// 后续逻辑
}
注意
不支持 amap2.0
import { MapDrill, DisrtictLabel } from 'amap-drill'
const initDistrictLayer = new AMap.DistrictLayer.Country({
zIndex: 10,
SOC: 'CHN',
depth: 1,
styles: {
fill: '#ffffff'
}
})
const map = new AMap.Map('map', {
zooms: [3, 18],
showIndoorMap: false,
center: [120, 30],
zoom: 4,
resizeEnable: true,
layers: [initDistrictLayer]
})
const dirllOptions = {}
let mapDrill = new MapDrill(map, drillOptions)
new DisrtictLabel(mapDrill, {
webApiKey: 'your_amap_web_api_key',
// labelMarker配置,参考amap文档
labelMarker: {
text: {
style: {
fillColor: '#37C0F6'
}
}
}
})
new MapDrill(map, dirllOptions)
map
: Map 实例dirllOptions
: mapDirll 配置
配置
{
webApiKey: 'your_amap_web_api_key',
// 点击行政区外部返回上一层行政区
clickOutsideToUp: true,
drill: {
province: {
zoom: 7
},
country: {
zoom: 4
},
city: {
zoom: 8
},
district: {
zoom: 10
},
street: {
zoom: 12
}
}
}
钻取行政区
MapDirll.drillTo(keywords)
- keywords- 邮政编码或者行政区名称 api
向上一层行政区钻取
MapDirll.updrill()
钻取行政区,这个方法是不需要通过查询行政区 api 的
MapDirll.drill(districtData)
- districtData:
DistrictLayer.getDistrictByContainerPos
获取到的数据
{
SOC: 'CHN',
x: 120, // x,y将被设置为地图的中心点
y: 30,
level: 'country',
adcode: '100000',
NAME_CHN: '中华人民共和国'
}
行政区名称显示
new DisrtictLabel(mapDrill, labelOptions)
- mapDrill: MapDirll 实例
- labelOptions
{
webApiKey: 'your_amap_web_api_key',
// labelMarker配置,参考amap文档
labelMarker: {
text: {
style: {
fillColor: '#37C0F6'
}
}
}