1.0.6 • Published 8 months ago
kamap v1.0.6
kamap
高德地图api二次封装
安装
npm i kamap --save
使用
基本用法
<div ref="kamap" style="height: 100%;width: 100%;position: relative;"></div>
import Kamap from 'kamap'
let kamap = new Kamap({
dom: that.$refs.kamap,// 必填,地图容器
mapkey: "高德key",// 必填,可在高德开放平台申请,https://lbs.amap.com/
securityCode: "安全密钥",// 必填,可在高德开放平台申请
center: [116.392590, 39.906050],// 地图初始中心位置
zoom: 15// 地图初始缩放级别
}, function(map) {
/* 地图加载完毕回调函数 */
})
参数
参数 | 说明 | 类型 | 默认值 | 必填 |
---|---|---|---|---|
dom | 地图容器 | HTMLElement | - | 是 |
mapkey | 高德key | String | - | 是 |
securityCode | 安全密钥 | String | - | 是 |
center | 初始中心经纬度 | [number, number] | [116.392590, 39.906050] | 否 |
zoom | 初始缩放级别 | number | 15 | 否 |
方法
点位
/**
* 添加一个点位
*/
kamap.addPoint({
position: [116.392590, 39.906050],// 必填,点位坐标
iconUrl: "自定义图标地址",// 点位图标
htm: "<div style='color: red;'>点位1</div>",// 点位点击气泡
extData: {// 点位扩展数据
name: "北京"
}
}, function(point, extData) {
/**
* 点位点击事件回调函数
* @param point 高德原生marker对象
* @param extData 点位扩展信息
*/
});
/**
* 清除所有点位
*/
kamap.removeAllPoint()
/**
* 根据id清除指定点位
* @param id 点位id,自动生成于extData中
*/
kamap.removePoint(id)
卫星图层
/**
* 添加卫星图层
*/
kamap.showSatellite();
/**
* 移除卫星图层
*/
kamap.removeSatelliteLayer();
热力图层
/**
* 添加热力图层
* @param points 点位数组,不传参数即为显示之前热力图层,传空数组即为置空数据
*/
kamap.showHeatMap([{lng: 117.817588, lat: 37.169422, count: 300}]);
/**
* 移除热力图层
*/
kamap.removeHeatMap();
清除所有覆盖物
kamap.removeAllOverlay();
地图定位到指定位置
kamap.positioning({
center: [116.392590, 39.906050],// 必填,地图定位坐标
zoom: 10,// 非必填,默认15,地图缩放级别
});
点击地图获取位置
kamap.getAddress(function(position) {
/**
* 点击地图获取位置回调函数
* @param position 鼠标所点击的位置信息,包含坐标和地址
*/
});
获取点位列表
kamap.getPointList();