地圖熱點 jquery.image-maps.js 的使用

羊角辮兒發表於2020-07-21

在我悠閒了幾天之後，我們後端給了我個任務，地圖熱點問題。簡單來說，就是後臺劃出熱點區域，設定連結，前端拿到資料渲染頁面，顯示熱點區域。我主要使用了jquery.image-maps.js,並且新增了一些我所需要的功能。

前端是很好顯示的，獲取到資料後直接渲染頁面。

　　主要是後端熱點區域位置座標的確定。

先看一下整體樣式功能圖，主要有新增熱點區域，單個刪除熱點區域，和全部刪除熱點區域，以及儲存劃出的熱點區域，還有拖拽上傳img圖片功能。以及雙擊熱點區域可填寫對應的連結。

上圖一觀，有點簡陋，相信各位小哥哥小姐姐能做的更好，勉強瞅瞅吧。

地圖熱點 jquery.image-maps.js 的使用

首先呢，來看這個圖片，可愛的巴衛，如果不喜歡，可以把自己桌面上的圖片拖拽進選區，也可以點選選擇圖片，進行上傳，反正大家怎末喜歡怎末來。這個選區呢，我設定了400×400，但是圖片寬度400，高度自適應的，放心的，圖片不會變形的。相關程式碼如下：

 //   上傳圖片事件
        var dropBox
        window.onload = function () {
            dropBox = document.getElementById("imgMap");
            dropBox.ondragenter = ignoreDrag;
            dropBox.ondragover = ignoreDrag;
            dropBox.ondrop = drop;
        }
        function ignoreDrag(e) {
            //因為我們在處理拖放，所以應該確保沒有其他元素會取得這個事件
            e.stopPropagation();
            e.preventDefault();
        }
        function drop(e) {
            //取消事件傳播及預設行為
            e.stopPropagation();
            e.preventDefault();

            //取得拖進來的檔案
            var data = e.dataTransfer;
            var files = data.files;
            //將其傳給真正的處理檔案的函式
            processFiles(files);
        }
        function processFiles(files) {
            $('#dropBox').css({
                "height": '100%'
            })
            var file = files[0];
            var output = document.getElementById("fileOutput");
            //建立FileReader
            var reader = new FileReader();
            //告訴它在準備好資料之後做什麼
            reader.onload = function (e) {
                $('#dropBox').attr('src', e.target.result)
            };
            //讀取圖片
            reader.readAsDataURL(file);
        }

新增熱點區域呢，這個選區是可以拖拽拉伸的，主要呢是確定矩形選區的位置座標，他主要是左上角的位置座標，以及矩形區域的寬度和高度來確定選取的位置。這是很重要的引數，用來確定熱點選取的位置。這樣前端才可以顯示相對應的熱點區域。他有相對應的事件，移動選取，位置改變，還有刪除選區，都是比較繁瑣的。把這些功能都放進了jquery.image-maps.js中，方便使用。

這就是jquery.image-maps.js，以及新增的部分功能。

/**
 * @name jQuery imageMaps plugin
 * @license GPL
 * @version 0.0.4
 * @date 11 22, 2010
 * @category jQuery plugin
 * @author Simon Tang (www@yiye.name)
 * @copyright (c) 2010 Simon Tang (http://yiye.name/)
 */
(function ($) {
    jQuery.fn.imageMaps = function (setting) {
        var $container = this;
        if ($container.length == 0) return false;
        $container.each(function () {
            var container = $(this);
            var $images = container.find('img[ref=imageMaps]');
            $images.wrap('<div class="image-maps-conrainer" style="position:relative;"></div>').css('border', '1px solid #ccc');
            $images.each(function () {
                var _img_conrainer = $(this).parent();
                _img_conrainer.prepend('<div class="button-conrainer"><input type="button" value="新增熱點區域" /><button class="saveAll">儲存</button><button class="deleteAll">全部刪除</button><button id="pictureClick">選擇圖片</button></div>').append('<div class="link-conrainer"></div>').append($.browser.msie ? $('<div class="position-conrainer" style="position:absolute"></div>').css({
                    background: '#fff',
                    opacity: 0
                }) : '<div class="position-conrainer" style="position:absolute"></div>');
                var _img_offset = $(this).offset();
                var _img_conrainer_offset = _img_conrainer.offset();
                _img_conrainer.find('.position-conrainer').css({
                    top: _img_offset.top - _img_conrainer_offset.top,
                    left: _img_offset.left - _img_conrainer_offset.left,
                    width: $(this).width(),
                    height: $(this).height()
                    // height: $(this)['0'].offsetHeight
                    // height: $('.position-conrainer').height()- 55
                    // border:'1px solid transparent'
                });
                var map_name = $(this).attr('usemap').replace('#', '');
                if (map_name != '') {
                    var index = 1;
                    // var _link_conrainer = _img_conrainer.find('.link-conrainer');
                    var _position_conrainer = _img_conrainer.find('.position-conrainer');
                    var image_param = $(this).attr('name') == '' ? '' : '[' + $(this).attr('name') + ']';
                    container.find('map[name=' + map_name + ']').find('area[shape=rect]').each(function () {
                        var coords = $(this).attr('coords');
                        // _link_conrainer.append('<p ref="'+index+'" class="map-link"><span class="link-number-text">Link '+index+'</span>: <input type="text" size="60" name="link'+image_param+'[]" value="'+$(this).attr('href')+'" /><input type="hidden" class="rect-value" name="rect'+image_param+'[]" value="'+coords+'" /></p>');
                        coords = coords.split(',');
                        _position_conrainer.append('<div ref="' + index + '" class="map-position" style="left:' + coords[0] + 'px;top:' + coords[1] + 'px;width:' + (coords[2] - coords[0]) + 'px;height:' + (coords[3] - coords[1]) + 'px;"><div class="map-position-bg"></div><span class="link-number-text">Link ' + index + '</span><span class="delete">X</span><span class="resize"></span></div>');
                        index++;
                    });
                }
            });

        });

        $('.button-conrainer input[type=button]').click(function () {
            var hhh = $('#dropBox').height()
            // console.log(hhh)
            // var _link_conrainer = $(this).parent().parent().find('.link-conrainer');
            var _position_conrainer = $(this).parent().parent().find('.position-conrainer');
            _position_conrainer.css({
                "height": hhh
            })
            var html = '<area shape="rect" coords="" href="" />'
            $('#Map').append(html)
            // var index = _link_conrainer.find('.map-link').length +1;
            var index = _position_conrainer.find('.map-position').length + 1
            var image = $(this).parent().parent().find('img[ref=imageMaps]').attr('name');
            image = (image == '' ? '' : '[' + image + ']');
            // _link_conrainer.append('<p ref="'+index+'" class="map-link"><span class="link-number-text">Link '+index+'</span>: <input type="text" size="60" name="link'+image+'[]" value="" /><input type="hidden" class="rect-value" name="rect'+image+'[]" value="10,10,100,40" /></p>');
            _position_conrainer.append('<div ref="' + index + '" class="map-position" style="left:0px;top:0px;width:90px;height:60px;"><div class="map-position-bg"></div><span class="link-number-text">Link ' + index + '</span><span class="delete">X</span><span class="resize"></span></div>');
            bind_map_event();
            define_css();
        });

        $('.button-conrainer .deleteAll').click(function (e) {
            $('.position-conrainer').empty()
            $('#Map area').remove()
        })
        // 儲存到本地
        $(' .button-conrainer .saveAll').click(function () {
            var savePart = $('#Map')['0'].outerHTML
            var img = $('#dropBox')['0'].outerHTML
            window.localStorage.setItem("site", savePart)
            window.localStorage.setItem("img", img)
        })
        //   上傳圖片事件
        var dropBox
        window.onload = function () {
            dropBox = document.getElementById("imgMap");
            dropBox.ondragenter = ignoreDrag;
            dropBox.ondragover = ignoreDrag;
            dropBox.ondrop = drop;
        }
        function ignoreDrag(e) {
            //因為我們在處理拖放，所以應該確保沒有其他元素會取得這個事件
            e.stopPropagation();
            e.preventDefault();
        }
        function drop(e) {
            //取消事件傳播及預設行為
            e.stopPropagation();
            e.preventDefault();

            //取得拖進來的檔案
            var data = e.dataTransfer;
            var files = data.files;
            //將其傳給真正的處理檔案的函式
            processFiles(files);
        }
        function processFiles(files) {
            $('#dropBox').css({
                "height": '100%'
            })
            var file = files[0];
            var output = document.getElementById("fileOutput");
            //建立FileReader
            var reader = new FileReader();
            //告訴它在準備好資料之後做什麼
            reader.onload = function (e) {
                //使用影像URL來繪製dropBox的背景
                $('#dropBox').attr('src', e.target.result)
            };
            //讀取圖片
            reader.readAsDataURL(file);
        }

        $('#fileinp').change(function (files) {
            processFiles(this.files)
        })
        $('#pictureClick').click(function () {
            $('#fileinp').click()
        })

        //繫結map事件
        function bind_map_event() {
            $('.position-conrainer .map-position .map-position-bg').each(function () {
                var map_position_bg = $(this);
                var conrainer = $(this).parent().parent();
                var map_position = map_position_bg.parent();
                map_position_bg.unbind('mousedown').mousedown(function (event) {
                    map_position_bg.data('mousedown', true);
                    map_position_bg.data('pageX', event.pageX);
                    map_position_bg.data('pageY', event.pageY);
                    map_position_bg.css('cursor', 'move');
                    return false;
                }).unbind('mouseup').mouseup(function (event) {
                    map_position_bg.data('mousedown', false);
                    map_position_bg.css('cursor', 'default');
                    return false;
                });
                conrainer.mousemove(function (event) {
                    if (!map_position_bg.data('mousedown')) return false;
                    var dx = event.pageX - map_position_bg.data('pageX');
                    var dy = event.pageY - map_position_bg.data('pageY');
                    if ((dx == 0) && (dy == 0)) {
                        return false;
                    }
                    var p = map_position.position();
                    var left = p.left + dx;
                    if (left < 0) left = 0;
                    var top = p.top + dy;
                    if (top < 0) top = 0;
                    var bottom = top + map_position.height();
                    if (bottom > conrainer.height()) {
                        top = top - (bottom - conrainer.height());
                    }
                    var right = left + map_position.width();
                    if (right > conrainer.width()) {
                        left = left - (right - conrainer.width());
                    }
                    map_position.css({
                        left: left,
                        top: top
                    });
                    map_position_bg.data('pageX', event.pageX);
                    map_position_bg.data('pageY', event.pageY);

                    bottom = top + map_position.height();
                    right = left + map_position.width();
                    console.log(left, top, right, bottom)
                    var arr = []
                    arr.push(left, top, right, bottom)
                    var coods = arr.join(',')
                    var k = map_position['0'].attributes.ref.value - 1 + ''
                    $('#Map area').prevObject['0'].links[k].coords = coods
                    // $('.link-conrainer p[ref='+map_position.attr('ref')+'] .rect-value').val(new Array(left,top,right,bottom).join(','));
                    return false;
                }).mouseup(function (event) {
                    map_position_bg.data('mousedown', false);
                    map_position_bg.css('cursor', 'default');
                    return false;
                });
               
            });
            $('.position-conrainer .map-position .resize').each(function () {
                var map_position_resize = $(this);
                var conrainer = $(this).parent().parent();
                map_position_resize.unbind('mousedown').mousedown(function (event) {
                    map_position_resize.data('mousedown', true);
                    map_position_resize.data('pageX', event.pageX);
                    map_position_resize.data('pageY', event.pageY);
                    return false;
                }).unbind('mouseup').mouseup(function (event) {
                    map_position_resize.data('mousedown', false);
                    return false;
                });
                conrainer.mousemove(function (event) {
                    if (!map_position_resize.data('mousedown')) return false;
                    var dx = event.pageX - map_position_resize.data('pageX');
                    var dy = event.pageY - map_position_resize.data('pageY');
                    if ((dx == 0) && (dy == 0)) {
                        return false;
                    }
                    var map_position = map_position_resize.parent();
                    var p = map_position.position();
                    var left = p.left;
                    var top = p.top;
                    var height = map_position.height() + dy;
                    if ((top + height) > conrainer.height()) {
                        height = height - ((top + height) - conrainer.height());
                    }
                    if (height < 20) height = 20;
                    var width = map_position.width() + dx;
                    if ((left + width) > conrainer.width()) {
                        width = width - ((left + width) - conrainer.width());
                    }
                    if (width < 50) width = 50;
                    map_position.css({
                        width: width,
                        height: height
                    });
                    map_position_resize.data('pageX', event.pageX);
                    map_position_resize.data('pageY', event.pageY);

                    bottom = top + map_position.height();
                    right = left + map_position.width();
                    // $('.link-conrainer p[ref='+map_position.attr('ref')+'] .rect-value').val(new Array(left,top,right,bottom).join(','));
                    return false;
                }).mouseup(function (event) {
                    map_position_resize.data('mousedown', false);
                    return false;
                });
            });
            $('.position-conrainer .map-position .delete').unbind('click').click(function () {
                var ref = $(this).parent().attr('ref');
                var num = ref - 1
                $('#map').context.links[num].remove()
                // var _link_conrainer = $(this).parent().parent().parent().find('.link-conrainer');
                var _position_conrainer = $(this).parent().parent().parent().find('.position-conrainer');
                // _link_conrainer.find('.map-link[ref='+ref+']').remove();
                _position_conrainer.find('.map-position[ref=' + ref + ']').remove();
                var index = 1;
                // _link_conrainer.find('.map-link').each(function(){
                //     $(this).attr('ref',index).find('.link-number-text').html('Link '+index);
                //     index ++;
                // });
                index = 1;
                _position_conrainer.find('.map-position').each(function () {
                    $(this).attr('ref', index).find('.link-number-text').html('Link ' + index);
                    index++;
                });


            });
        }

        bind_map_event();

        function define_css() {
            //樣式定義
            $container.find('.map-position').css({
                position: 'absolute',
                border: '1px solid #000',
                'font-weight': 'bold'
            });
            $container.find('.map-position .map-position-bg').css({
                position: 'absolute',
                background: '#0F0',
                opacity: 0.5,
                top: 0,
                left: 0,
                right: 0,
                bottom: 0
            });
            $container.find('.map-position .resize').css({
                display: 'block',
                position: 'absolute',
                right: 0,
                bottom: 0,
                width: 5,
                height: 5,
                cursor: 'nw-resize',
                background: '#000'
            });
            $container.find('.map-position .delete').css({
                display: 'block',
                position: 'absolute',
                right: 0,
                top: 0,
                width: 10,
                height: 12,
                'line-height': '11px',
                'font-size': 12,
                'font-weight': 'bold',
                background: '#000',
                color: '#fff',
                'font-family': 'Arial',
                'padding-left': '2px',
                cursor: 'pointer',
                opactiey: 1
            });
        }
        define_css();
    };
})(jQuery);

接下來呢，給大家說說雙擊新增連結功能，每個熱點區域都有對應的連結，後端設定了連結，前端在顯示熱點區域時，點選選區就可以直接跳轉到後臺所設定的連結。這是單獨新增的功能，沒有放到jquery.image-maps.js 中。

$('.map-position ').unbind('dblclick').dblclick(function () {
          var k = $(this)['0'].attributes.ref.value - 1 + ''
          var lll = $('.link input').val().split('//')[1]
          var vvv = $('#Map area')[k].host
          if (!lll) {
            $('.link input')['0'].value = 'http://'
          } else {
            $('.link input')['0'].value = 'http://' + vvv
          }
          $('.bombBox').show()
          // 點選取消
          $('.Cancel').unbind('click').click(function () {
            $('.bombBox').hide()
          })
          // 點選確定 熱點連結新增完成
          $('.sure').unbind('click').click(function () {

            $('.bombBox').hide()
            var value = $('.link input').val()
            $('#Map area')[k].href = value

          })

        })

樣式結構呢如下，主要使用了 map > area的功能。

 <input type="file" id="fileinp" @change="processFiles(this.files)">
  <div id="debug"></div>
 
  <div id="imgMap">
    <img src="" name="test" id="dropBox" width="400" class="map" border="0" height="400" usemap="#Map" ref='imageMaps' />
    <map name="Map" id="Map">
    </map>
    <!-- 資訊填寫 -->
    <div class="bombBox">
      <p class="title">填寫熱點連結</p>
      <hr class="hr">
      <p class="link"><span>link:</span>
        <input type="text" size="60" value="http://" data-id="" />
      </p>
      <p class="btn">
        <button class="sure">確定</button>
        <button class="Cancel">取消</button>
      </p>
    </div>
  </div>

我主要呢，是吧img標籤以及map標籤內容都儲存在了本地中，前端獲取呢，只需要整體獲取，外面搭個盒子就可以顯示了。

在本地檢視可看到儲存的資料，

　　window.localStorage.setItem("site", savePart)

window.localStorage.setItem("img", img)

前端就可以獲取到img以及site來進行顯示熱點區域。

 <script>
        $(document).ready(function () {
            var site = window.localStorage.getItem('site')
            var img = window.localStorage.getItem('img')
            console.log(site)
            console.log(img)
            $('.box').append(img)
            $('.box').append(site)
            $('#Map area').attr('data-maphilight','{"stroke":true,"fillColor":"000000","fillOpacity":0,"alwaysOn":true}')
            $('.map').maphilight();
            $('#squidheadlink').mouseover(function (e) {
                $('#squidhead').mouseover();
            }).mouseout(function (e) {
                $('#squidhead').mouseout();
            }).click(function (e) { e.preventDefault(); });

        })
    </script>

至此呢。一個簡單的前後端都可以很簡單操作的地圖熱點就完成了，至於樣式部分呢，不嫌棄我的樣式醜的，可以在github上下載看看哦！

github:https://github.com/hey-yst/demo

HTML 標籤(圖片對映、熱點)的使用
2010-03-26
HTML
jQuery地圖熱點效果-滑鼠經過彈出提示層資訊
2015-03-14
jQuery地圖
高德地圖app怎麼使用北斗地圖? 高德地圖設定北斗地圖的教程
2020-06-23
地圖APP
提-關於高德地圖熱力圖-問:
2020-11-23
地圖
PHP+jQuery中國地圖熱點資料統計展示例項
2019-12-19
PHPjQuery地圖
如何優雅地使用Redis之點陣圖操作
2018-08-23
Redis
地圖中html元素的使用
2017-05-09
地圖HTML
ECharts 實現地圖散點圖（上）
2017-03-20
Echarts地圖
Google地圖：全球各國熱門搜尋
2012-09-24
Go地圖
地圖點聚合優化方案
2015-04-11
地圖優化
遊戲如何長效且優雅地蹭熱點？
2021-02-19
遊戲
win10 自帶地圖如何使用_win10自帶地圖的使用教程
2020-05-29
Win10地圖
中國地圖繪製-點選事件
2018-07-06
地圖事件
如何製作京東自提點地圖？
2015-06-17
地圖
地圖網點分佈圖怎麼做，如何製作地圖資料分佈圖
2021-08-16
地圖
熱門MOBA遊戲的地圖“黑”歷史是怎麼來的？
2020-02-25
遊戲地圖
【高德地圖API】從零開始學高德JS API（一）地圖展現——仙劍地圖，麻點圖，街景，室內圖
2014-04-25
地圖APIJS
Linux 中 WIFI 和熱點的使用
2024-07-13
LinuxWiFi
react中使用高德地圖的原生API
2019-06-28
React地圖API
使用flutter_map計算相應的高德地圖zoom值與地圖的center
2018-12-28
Flutter地圖OOM
vue如何使用騰訊地圖JavaScript API GL進行打點標記
2020-11-21
Vue地圖JavaScriptAPI
地圖自定義錨點+覆蓋物
2017-08-31
地圖
地圖判斷點在區域內
2016-03-17
地圖斷點
如何讓熱點圖支援大資料
2017-05-16
大資料
58安居客研究院：2023年2月份熱點城市房價地圖
2023-03-16
地圖
iOS 地圖定位地圖
2018-12-20
iOS地圖
如何製作網點地圖，網點分佈圖怎麼製作
2021-07-15
地圖
react專案結合echarts,百度地圖實現熱力圖
2020-09-18
ReactEcharts地圖
使用R畫地圖資料
2016-02-04
地圖
vue使用Echarts繪製地圖
2024-08-26
VueEcharts地圖
計算地圖中兩點之間的距離
2022-01-17
地圖
地圖開發筆記（一）：百度地圖介紹、使用和Qt內嵌地圖Demo
2021-01-10
地圖筆記QT
查詢熱點快和熱點塊的操作
2017-09-13
百度地圖，您所使用的地圖JS API版本過低，解決方法
2024-07-23
地圖JSAPI
3D地圖的定時高亮和點選事件
2020-11-23
3D地圖事件
高德地圖自定義Marker點選時出現的InfoWindow
2016-11-03
地圖
隨時隨地與 LLMs 聊天的開源專案「GitHub 熱點速覽」
2024-08-06
Github
圖片的黑魔法——GitHub 熱點速覽 v.21.13
2021-03-30
Github

地圖熱點 jquery.image-maps.js 的使用

相關文章