Javascript - 使用项目选择构建可滚动地图的框架？

Posted 2023-02-26

【中文标题】Javascript - 使用项目选择构建可滚动地图的框架？

【英文标题】：Javascript - Which framework to build scrollable map with item selection?

【发布时间】：2012-02-04 22:36:40

【问题描述】：

我需要在移动设备网站上滚动一个大地图区域，并且能够在地图上选择 PNG 或矢量图像，如下所示：

最简单的方法是什么？ html5、jQuery、Sencha Touch 或 ?

【参考方案1】：

使用 HTML5 画布，您可以像这样滚动：

JS：

var img = new Image();  
img.src = 'image.jpg'; 

var w = $(window).outerWidth();
var h = $(window).height();

var addit = -1;
var scrollSpeed = 10; 
var current = 0;

ctx = document.getElementById('canvas1').getContext('2d');

var init = setInterval(function() 
               current += addit;
               ctx.drawImage(img,current,0, w, h);
           , scrollSpeed);

CSS：

body 
  overflow: hidden;

#canvas1 
  position: absolute;
  height: 100%;
  width: auto;
  left: 0;
  top: 0;

HTML：

<canvas id="canvas1"  ></canvas>