javascript - jQuery 附加 map 标记

Question

我正在尝试制作一张可以附加标记的 map 。图像还可以通过鼠标滚动来放大和缩小。问题是标记不随缩放而流动。此外，单击时标记几乎不会显示。有什么想法吗？

<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() 的库