map html相对坐标,以图片作为地图，如何查询出相对坐标点（简单webgis）。

最新推荐文章于 2024-12-19 00:20:58 发布

物语妖

最新推荐文章于 2024-12-19 00:20:58 发布

阅读量556

点赞数

文章标签： map html相对坐标

本文介绍如何使用SuperMap地图API创建地图实例，并通过添加图片图层和鼠标位置控件来实现获取鼠标点击时的坐标功能。代码示例展示了如何初始化地图、添加图层以及设置事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过这个获取鼠标位置的控件获取当前鼠标位置，然后监听浏览器的鼠标点击事件，点击后获取坐标。以官网的image图层加载为例可以修改成如下代码

var map, layer,control;

map = new SuperMap.Map("map", {

controls: [

new SuperMap.Control.ScaleLine(),

new SuperMap.Control.Zoom(),

new SuperMap.Control.LayerSwitcher(),

new SuperMap.Control.Navigation()]

});

var options = {numZoomLevels: 12, useCanvas: false};

var bounds = new SuperMap.Bounds(-180, -90, 180, 90);

layer = new SuperMap.Layer.Image(

'World_Day',

'images/Day.jpg',

bounds,

options

);

map.addLayer(layer);

map.zoomToMaxExtent();

control = new SuperMap.Control.MousePosition();

map.events.on({"click": getMousePositionPx});

function getMousePositionPx(evt) {

//获取鼠标坐标位置

var lonLat = map.getLonLatFromPixel(evt.xy);

console.log(lonLat);

if (!lonLat) {

return;

}