html热区坐标,HTML热区map坐标，随窗口大小自适应办法（javascript）

(function () {

adjust ()

var timer = null

window.onresize = function () {

clearTimeout(timer)

timer = setTimeout( function () {

window.location.reload()

}, 100)

}

//重新设置每个热区

function adjust () {

var areas = $('#planetmap').children()

$.each(areas, function (idx, ele) {

var oldCoords = $(ele).attr('coords');

console.log(oldCoords)

$(ele).attr('coords', adjustPosition(oldCoords) );

})

}

//坐标转换

function adjustPosition (pos) {

var docWidth = $('body').width(),

docHeight = $('body').height(),

imageWidth = 700,

imageHeight = 1000;

var coords = pos.split(',');

for (var i = 0; i < coords.length; i++) {

coords[i] = Math.floor( parseInt(coords[i]) * docWidth / imageWidth ).toString();

i++;

coords[i] = Math.floor( parseInt(coords[i]) * docHeight / imageHeight ).toString();

}

console.log(coords.join(','))

return coords.join(',')

}

})()

html热区坐标,HTML热区map坐标，随窗口大小自适应办法（javascript）相关推荐

HTML坐标不随着屏幕大小改变,HTML热区map坐标，随窗口大小自适应办法（javascript）...
为图片添加MAP: /> /> /> /> 图片大小随页面变化,需要MAP中每个area的坐标也随页面等比例变化. Javascript实现: adjust(); var ti ...
根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
最近在开发百度地图,需要实现的是地图初始化的时候,能够把我们所有的标注点markers显示在地图上,并且让地图有一个合适的显示级别.以提高用户体验. 找到了了解决方案: 百度地图每一个显示级别对应了一 ...
gps wgs84坐标与高德gcj02坐标互转
vue中 wgs84坐标转为高德gcj02坐标,详见高德官方文档:其他坐标转高德坐标-坐标变换-教程-地图 JS API | 高德地图API //设置gps wgs84坐标转为高德gcj02conve ...
openlayers地图坐标转换为屏幕像素坐标，屏幕像素坐标转成地图实际坐标
前言: openlayers的地图坐标的转换,地图坐标与屏幕像素坐标的互转. 具体方法: 地图坐标转屏幕像素(getPixelFromCoordinate):入口屏幕像素转地图坐标(getCoord ...
坐标范围计算显示缩放级别zoom自适应显示地图
坐标范围计算显示缩放级别zoom自适应显示地图 1.数据: //数据准备 var points = [`在这里插入代码片`{"lng":116,"lat":40 ...
百度地图坐标查询（真实坐标）
因为百度地图使用的是自己加密之后的坐标系,所以和网络上常用的WGS84坐标系有较大的偏差,不过百度地图API有现成的转换方法直接用就是,代码如下 1.添加坐标查询方法 theLocation(){if ...
php 经纬度坐标转换 WGS84、火星坐标 (GCJ-02)、百度坐标 (BD-09)
项目有gps上报的功能, 由于前端插件问题导致大量gps定位数据转换百度坐标(BD-09)时产生极大偏移, 故需要后端做经纬度坐标转换, 看到一篇java的相关技术帖, 拿来做了修改 Ps: 坐标转换 ...
R语言ggplot2可视化：指定标题的坐标轴位置（X轴坐标和Y轴坐标），将图像的标题（title）放置在图像内部的指定位置（customize title positon in plot）
R语言ggplot2可视化:指定标题的坐标轴位置(X轴坐标和Y轴坐标),将图像的标题(title)放置在图像内部的指定位置(customize title positon in plot) 目录
火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版...
转自:https://www.cnblogs.com/fwc1994/p/5884115.html 火星坐标.百度坐标.WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版火星坐标 ...

html热区坐标,HTML热区map坐标，随窗口大小自适应办法（javascript）

html热区坐标,HTML热区map坐标，随窗口大小自适应办法（javascript）相关推荐

最新文章

热门文章