<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插件测试模板</title>
<link rel="stylesheet" href="./css/latlng2px.css">
</head>
<script src="./js/xgmap.js"></script>
<body>
<div id="wrap">
<div id="map"></div>
</div>
</body>
<script>
/*---------------------------------------------------------- 创建地图 ----------------------------------------------------------*/
// 创建地图对象
var map = new XGMap("map", {
"mapSrc": "../img/map.png",// 初始化地图地址
"mapWidth": 4070,// 地图属性宽度
"mapHeight": 6750,// 地图属性高度
"maxBounds": {
_leftBottomPoint: { lat: 30.412903, lng: 120.28025 },
_rightTopPoint: { lat: 30.419127, lng: 120.290197 }
},// 经纬度边界
"mapZoom": {
"bgWidth": 1200, // 背景宽度
"bgHeight": 700 // 背景高度
}
});
// 初始化地图
map._init()
/*---------------------------------------------------------- 地图参数设置 ----------------------------------------------------------*/
// 配置使用地图的尺寸 放大缩小的倍数
// map.setMapSize(4070, 6750);
// 插入图片
// map.setMapSrc("../img/map/wfjds.png");
// 设置地图显示大小
// map.setBackgroudSize(500, 400)
// 设置地图边界
// map.setBorder({
// _leftBottomPoint: { lat: 30.41263, lng: 120.27949 },
// _rightTopPoint: { lat: 30.41956, lng: 120.29118 }
// })
/*---------------------------------------------------------- 创建移动标记图标 ----------------------------------------------------------*/
// 经纬度转换坐标
var _latlng = map.gps2px(30.416405, 120.285431)
// 获取定位坐标点
var _point = map.point(_latlng)
// 创建定位显示图标
var _redIcon = map.icon({ iconUrl: '../img/cardIcon.gif', iconSize: [40, 50], iconAnchor: [20, 50] })
// 创建移动显示标记
var _moveMarker = moveMarkers.marker(_point, _redIcon)
// 标记对象添加到地图
map.add(_moveMarker._marker);
/*---------------------------------------------------------- 移动图标绑定点击事件 ----------------------------------------------------------*/
// 窗口函数
var _popupInfoWindow = infoWindows.bindPopup(200, 30, `串号：866714049354441`)
// 显示点数据信息
map.bindPopup(map, _moveMarker, _popupInfoWindow)
/*---------------------------------------------------------- 创建标记 ----------------------------------------------------------*/
// 经纬度转换坐标
var _infoWindo_latlng = map.gps2px(30.414845, 120.286053)
// 获取定位坐标点
var _infoWindo_point = map.point(_infoWindo_latlng)
// 创建定位显示图标
var countIcon = map.icon({ iconUrl: './img/countIcon.gif', iconSize: [40, 50], iconAnchor: [20, 50] })
// 创建移动显示标记
var countMarker = moveMarkers.marker(_infoWindo_point, countIcon)
// 标记对象添加到地图
map.add(countMarker._marker);
/*---------------------------------------------------------- 标记绑定提示窗体 ----------------------------------------------------------*/
var _info = `<div style="color:red;" onclick="test1()">this is xiaoge test demo</div>`
// 标记窗口
var _infoWindow = infoWindows.bindTooltip(countMarker, _info, { toolbar: [200, 36], offset: [100, 88] })
map.add(_infoWindow)
/*---------------------------------------------------------- 修改图标 ----------------------------------------------------------*/
setTimeout(() => {
var _icon = map.icon({ iconUrl: './img/busIcon.gif', iconSize: [40, 50], iconAnchor: [20, 50] })
map.setIcon(_moveMarker, _icon)
}, 2000);
/*---------------------------------------------------------- 移动移动标记图标到新位置 ----------------------------------------------------------*/
setTimeout(() => {
var latlng = map.gps2px(30.417068, 120.28624)
var point = map.point(latlng)
map.moveTo(_moveMarker, point, 1000)
}, 2000);
/*---------------------------------------------------------- 绑定点击事件获取坐标 ----------------------------------------------------------*/
// 地图绑定事件
map.addEventBinding("dblclick", funcGetCordXY);
// 获取坐标方法
function funcGetCordXY (ev) {
// 坐标对象
var _cord = {
cord_X: ev.offsetX,
cord_Y: ev.offsetY,
}
console.log(_cord)
// 打印坐标对象
console.log(`获取地图坐标：[${ev.offsetX},${ev.offsetY}]`)
}
/*---------------------------------------------------------- 遮盖物 ----------------------------------------------------------*/
// 画圆
var _cir_point = map.point(map.gps2px(30.418223, 120.283958))
var _cir = map.drawCircle(_cir_point, 10, {
borderSize: 2, //边框线代销
borderColor: 'blue',//颜色
opacity: 0.8,//透明度
fillColor: '#f00',
})
map.add(_cir._icon)
// 画矩形
var _square = map.drawSquare(300, 200, 250, 100, {
borderSize: 1, //设置虚线
borderColor: 'blue',//颜色
opacity: 1,//透明度
fillColor: '#f00',
})
map.add(_square._icon)
// 画直线
var _lineArray = [[50, 50], [603, 158]]
var _line = map.drawLine(_lineArray, {
borderSize: 2, //设置虚线
borderColor: 'red',//颜色
})
map.add(_line._line)
// 绘画多边形
var _pointsArray = [
map.point({ cordX: 692, cordY: 337 }),
map.point({ cordX: 587, cordY: 513 }),
map.point({ cordX: 743, cordY: 697 }),
map.point({ cordX: 771, cordY: 683 }),
map.point({ cordX: 821, cordY: 610 }),
map.point({ cordX: 758, cordY: 578 }),
map.point({ cordX: 860, cordY: 415 }),
map.point({ cordX: 692, cordY: 337 }),
]
var _polygon = map.drawPolygon(_pointsArray, {
fillColor: "none",
lineColor: "blue",
lineWidth: 3,
opacity: 0.7
})
map.add(_polygon._polygon)
// 判断一个点是否在一个区域中
var latlng = map.gps2px(30.415916, 120.284805)
var __point = map.point(latlng)
var bool = map.isInPolygon([__point._cord_X, __point._cord_Y],
[[806, 503],
[677, 253],
[851, 4],
[881, 29],
[949, 124],
[869, 170],
[983, 393],
[806, 503]])
console.log(latlng)
console.log(__point)
console.log(bool)
</script>
<!-- <script src="./js/tracks.js"></script> -->
</html>
经纬度转像素 + web前端定位插件
需积分: 20 195 浏览量
2022-07-21
16:00:45
上传
评论
收藏 194KB RAR 举报
latlng2px.rar （16个子文件） 
latlng2px css 
latlng2px.css 385B
latlng2px.html 7KB img 
bs.png 22KB
trackIcon.gif 14KB beaconIcon.gif 19KB busIcon.gif 25KB map.png 11KB _searchIcon.gif 14KB blueIcon.gif 23KB trackPointIcon.gif 1KB cardIcon.gif 23KB countIcon.gif 7KB camera.png 8KB searchIcon.gif 8KB alarmIcon.gif 18KB js xgmap.js 19KB
评论0