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();