【蜂鸟地图】相关问题

Vue3使用蜂鸟方法

下载依赖包

npm i fengmap

在项目中引用

import fengmap from 'fengmap/build/fengmap.map.min';

<div id="fengMap"></div>


function getMap() {
	var map;
	var options = {
		container: document.getElementById('hotMap'),
		appName: '蜂鸟研发SDK_2_0',
		key: '57c7f309aca507497d028a9c00207cf8',
		mapID: '1513361948621471746',
		themeID: '1581910231660457986',
		level: 2,
		mapZoom: 19.5,
		viewMode: fengmap.FMViewMode.MODE_2D,
		enabledPanRange: true,
		// visibleLevels: [1, 1],
		highlightColor: '#2f65ee', //选中后高亮颜色
	};

	map = new fengmap.FMMap(options);
	map.on('loaded', function () {
		map.setLabelField(fengmap.FMLabelField.ENAME);
	});
}

onMounted(() => {
	getMap();
});

<style>
	#fengmap {
		width: 500px;
		height: 200px;
	}
</style>

相关问题及解决方法

1.设定当前位置点后报错

				constraintCoords = routeAnalyser.pathConstraint(coords);
				constraintCoords.angle = objMessage.data.angle;//报错angle不存在等

原因：当前定位点不存在与地图中，无法将当前点位坐标设置在地图中

解决方法：

//使用map.getBound()方法获取到当前地图最小及最大值后，查看当前点位是否在区间内
console.log(map.getBound(), 'map.getBound()');

2.打开页面后，地图自动适配到页面大小

map.on('loaded', function () {
    map.setFitView(map.getBound());
    }

3.切换地图建筑物名称显示中文或英文

map.setLabelField(fengmap.FMLabelField.NAME);//中文
map.setLabelField(fengmap.FMLabelField.ENAME);//英文

4.获取地图加载进度

map.on('progress', function (e) {
	if (e.progressBar === 100) {
	// 地图加载完成
	}
});

5.设置墙面不可点击/设置墙面点击不生效

// 墙面不可点击
map.pickFilterFunction = function (event) {
	if (event.data) {
	return !!event.data.name;
	}
};

6.定位点旋转至指定角度

locationMarker.rotateTo({
	heading: angle//角度值,
});