ne-map
ne 前端地图组件
安装
$ npm i ne-map -s
使用
初始化地图
- 引入webpack插件实现按需打包
通过环境变量注入地图所需KEY
高德地图 NEMAP_AKEY=A*********S
百度地图 NEMAP_BKEY=A*********S
腾讯地图 NEMAP_TKEY=A*********S
// webpack.config.js
const NeMapPlugin = require('ne-map/lib/NeMapPlugin');
...
plugins: [
...
new NeMapPlugin(),
...
]
...
- 全部引入
; // 高德地图const Map = NeMapAMap;// 百度地图// const Map = NeMap.BMap;// 腾讯地图// const Map = NeMap.TMap; const map = 'map-container' zoom: 17 // 缩放级别 center: 116397428 3990923 // 中心点 toolbar: true // 是否显示比列尺控件;
或
; // 高德地图const Map = AMap;// 百度地图// const Map = BMap;// 腾讯地图// const Map = TMap; const map = 'map-container' zoom: 17 // 缩放级别 center: 116397428 3990923 // 中心点 toolbar: true // 是否显示比列尺控件;
- 单独引入
// 高德地图;// 百度地图;// 腾讯地图; const map = 'map-container' zoom: 17 // 缩放级别 center: 116397428 3990923 // 中心点 toolbar: true // 是否显示比列尺控件;
设置缩放级别和中心点
map;
添加覆盖物
const marker = map;
覆盖物移动
map;
清除所有覆盖物
map;
添加信息窗体
map;
热力图
- 添加热力图
const points = lng: 116418261 lat: 39921984 count: 50 lng: 116423332 lat: 39916532 count: 51 lng: 116419787 lat: 39930658 count: 15 lng: 116418455 lat: 39920921 count: 40 lng: 116418843 lat: 39915516 count: 100 lng: 11642546 lat: 39918503 count: 6 lng: 116423289 lat: 39919989 count: 18 lng: 116418162 lat: 39915051 count: 80 lng: 116422039 lat: 3991782 count: 11 lng: 11641387 lat: 39917253 count: 7 lng: 11641773 lat: 39919426 count: 42 lng: 116421107 lat: 39916445 count: 4 ;map;
- 显示热力图
map;
- 隐藏热力图
map;
轨迹回放
- 添加轨迹
const lineArr = ;let lngX = 116397428;let latY = 3990923;lineArr;for let i = 1; i < 40; i++ lngX = lngX + Math * 00005; if i % 2 latY = latY + Math * 00001; else latY = latY + Math * 00006; lineArr;map;
- 开始动画
map;
- 暂停动画
map;
- 继续动画
map;
- 停止动画
map;
坐标转换
const gps = ;let lngX = 1163;let latY = 399;gps;for let i = 1; i < 40; i++ lngX = lngX + Math * 00005; if i % 2 latY = latY + Math * 00001; else latY = latY + Math * 00006; gps;Map;
坐标转换-2-GPS转当前地图坐标
const gps = [];
let lngX = 116.3;
let latY = 39.9;
gps.push({ longitude: lngX, latitude: latY });
for (let i = 1; i < 40; i++) {
lngX = lngX + Math.random() * 0.0005;
if (i % 2) {
latY = latY + Math.random() * 0.0001;
} else {
latY = latY + Math.random() * 0.0006;
}
gps.push({ longitude: lngX, latitude: latY });
}
const res = Map.translateFromGPS(gps);
console.log(res);
坐标转换-2-当前地图坐标转GPS
const gps = [];
let lngX = 116.3;
let latY = 39.9;
gps.push({ longitude: lngX, latitude: latY });
for (let i = 1; i < 40; i++) {
lngX = lngX + Math.random() * 0.0005;
if (i % 2) {
latY = latY + Math.random() * 0.0001;
} else {
latY = latY + Math.random() * 0.0006;
}
gps.push({ longitude: lngX, latitude: latY });
}
const res = Map.translateToGPS(gps);
console.log(res);
逆地址解析
const location = 116396574 39992706 ;Map;