171 lines
4.7 KiB
JavaScript
171 lines
4.7 KiB
JavaScript
/*
|
|
* @Descripttion : 百度地图
|
|
* @Author : liuzhifang
|
|
* @Date : 2022-06-15 08:12:07
|
|
* @LastEditors : liuzhifang
|
|
* @LastEditTime : 2022-06-15 08:50:17
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
var bmap = (function () {
|
|
let map = null;
|
|
let mapData = {
|
|
lng: '',
|
|
lat: '',
|
|
};
|
|
|
|
/**
|
|
* @description: 初始化地图
|
|
* @param {*}
|
|
* @return {*}
|
|
* @Date: 2021-09-15 14:00:07
|
|
*/
|
|
function init(ak) {
|
|
window.onload = _appendBmapJs(ak);
|
|
}
|
|
|
|
/**
|
|
* @description: 重置数据
|
|
* @param {*}
|
|
* @return {*}
|
|
* @Date: 2021-09-15 15:27:17
|
|
*/
|
|
function _restMapData() {
|
|
// 清空经纬度
|
|
mapData.lng = '';
|
|
mapData.lat = '';
|
|
}
|
|
|
|
/**
|
|
* @description: 向 html 中添加百度地图 sdk (ak: n255HlgxO7hR9TClb3skfwcpl7oUGMri)
|
|
* @param {*}
|
|
* @return {*}
|
|
* @Date: 2021-09-15 14:00:41
|
|
*/
|
|
function _appendBmapJs(ak) {
|
|
const src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=initialize`;
|
|
let head = document.head || document.getElementsByTagName('head')[0];
|
|
let script = document.createElement('script');
|
|
script.type = 'text/javascript';
|
|
script.setAttribute('src', src);
|
|
head.appendChild(script);
|
|
}
|
|
|
|
/**
|
|
* @description: 添加地图控件
|
|
* @param {*}
|
|
* @return {*}
|
|
* @Date: 2021-09-15 13:40:46
|
|
*/
|
|
function _setOption() {
|
|
// 添加比例尺控件
|
|
let scaleCtrl = new BMapGL.ScaleControl();
|
|
map.addControl(scaleCtrl);
|
|
// 添加缩放控件
|
|
let zoomCtrl = new BMapGL.ZoomControl();
|
|
map.addControl(zoomCtrl);
|
|
}
|
|
|
|
/**
|
|
* @description: 开始绘制地图
|
|
* @param {*} lng
|
|
* @param {*} lat
|
|
* @param {*} zoom
|
|
* @return {*}
|
|
* @Date: 2021-09-15 13:40:06
|
|
*/
|
|
function drawMap({ lng, lat, zoom }) {
|
|
// 重置数据
|
|
_restMapData();
|
|
// 创建Map实例
|
|
map = new BMapGL.Map('mapForPosition');
|
|
// 初始化地图,设置中心点坐标和地图级别
|
|
map.centerAndZoom(new BMapGL.Point(lng, lat), zoom);
|
|
//开启鼠标滚轮缩放
|
|
map.enableScrollWheelZoom(true);
|
|
// 设置地图旋转角度
|
|
map.setHeading(64.5);
|
|
// 设置地图的倾斜角度
|
|
map.setTilt(73);
|
|
// 设置地图配置
|
|
_setOption();
|
|
// 添加点
|
|
drawMarker(lng, lat);
|
|
}
|
|
|
|
/**
|
|
* @description: 添加标注点（允许拖动并获取经纬度）
|
|
* @param {*} lng
|
|
* @param {*} lat
|
|
* @return {*}
|
|
* @Date: 2021-09-15 13:39:14
|
|
*/
|
|
function drawMarker(lng, lat) {
|
|
let point = new BMapGL.Point(lng, lat);
|
|
// 创建标注, 允许拖拽
|
|
let marker = new BMapGL.Marker(point, {
|
|
enableDragging: true,
|
|
});
|
|
// 将标注添加到地图中
|
|
map.addOverlay(marker);
|
|
// 绑定拖动结束事件，获取经纬度
|
|
marker.addEventListener('dragend', function () {
|
|
let curPoint = marker.getPosition();
|
|
// 保存经纬度
|
|
mapData.lng = curPoint.lng;
|
|
mapData.lat = curPoint.lat;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @description: 通过地址获取经纬度
|
|
* @param {*} seachWord
|
|
* @return {*}
|
|
* @Date: 2021-09-15 13:51:50
|
|
*/
|
|
function searchPosition(seachWord) {
|
|
let localSearch = new BMapGL.LocalSearch(map);
|
|
// 允许自动调节窗体大小
|
|
localSearch.enableAutoViewport();
|
|
localSearch.setSearchCompleteCallback(function (searchResult) {
|
|
// 获取搜索结果第一个
|
|
let poi = searchResult.getPoi(0);
|
|
if (poi) {
|
|
// 中心点坐标和地图级别
|
|
map.centerAndZoom(poi.point, 19);
|
|
// 清空原来的标注
|
|
map.clearOverlays();
|
|
// 添加点(搜索结果第一个的经纬度)
|
|
drawMarker(poi.point.lng, poi.point.lat);
|
|
// 保存经纬度
|
|
mapData.lng = poi.point.lng;
|
|
mapData.lat = poi.point.lat;
|
|
// 返回数据
|
|
getData();
|
|
} else {
|
|
foxui.message({
|
|
type: 'danger',
|
|
text: '没有找到相应的位置，请重新填写',
|
|
});
|
|
}
|
|
});
|
|
localSearch.search(seachWord);
|
|
}
|
|
|
|
/**
|
|
* @description: 返回地图数据
|
|
* @param {*}
|
|
* @return {*}
|
|
* @Date: 2021-09-15 13:50:16
|
|
*/
|
|
function getData() {
|
|
return mapData;
|
|
}
|
|
|
|
// 初始化
|
|
// _init('n255HlgxO7hR9TClb3skfwcpl7oUGMri');
|
|
|
|
return { init, drawMap, drawMarker, searchPosition, getData };
|
|
})();
|