Question

我正在尝试制作一张可以附加标记的地图。图像还可以在鼠标滚动上放大和缩小。问题是标记不随缩放一起流动。单击时标记显示很少。有什么想法吗？

<div class="custom"></div>
<div id="map1"></div>

$(document).ready(function(){

$('#map1').html('<img src="http://www.newlondon-tours.com/public/maps/london-city-map-free-england.jpg" alt="custom" class="custom_img" style="position:absolute;z-index:1" />');
    $('.custom_img').wheelzoom();
$(".custom_img").click(function(e){
var offset_t = $(this).offset().top - $(window).scrollTop();
var offset_l = $(this).offset().left - $(window).scrollLeft();
var left = Math.round( (e.clientX - offset_l) );
var top = Math.round( (e.clientY - offset_t) );     

$('.custom').append('<p  style="z-index:11;font-size:100px;border:1px solid #000;border-radius: 10px;background:red;width:10px;height:10px;position:absolute;left:' + left + 'px;top:'+ top +'px" ></p>');              

          }); 

})

Demo

Answer 1

听起来你需要查看一下你提供的wheelzoom()

所使用的库。

jQuery附加地图标记

1 个答案: