javascript - 将 map 与选择相关联

Question

我有一张不同地区的 map 。我需要的是当我在 map 上的区域上单击(js 中的 .click 函数)时，它与我的选择相关联:

<label class="b-map__form__region">
                    Region
                    <span class="value custom-select">Choose region</span>
                    <select class ="region_load" id="region_load" name="r_id">
                        <?php foreach($this->regions as $region): ?>
                        <option><?php echo $region['r_name'] ?></option>
                        <?php endforeach; ?>
                    </select>
                </label>

我有这个 js 用于我的 map 和 onclick 函数，这里是区域已经与标题绑定(bind)，所以我需要它也与选择绑定(bind):

            var
                $mapItem = $('.b-map__item'),
                $mapHighlight = $('.b-map__item__highlight'),

                $mapFormRegion = $('.b-map__form__region'),
                $currentRegion = $mapFormRegion.find('.value'),

                .on({
                    click: function() {
                        var
                            $this = $(this),
                            regionCode = $this.attr('href').replace('#', ''),

                        $currentRegion.html($this.attr('title'));
                        $mapCity.html('');

                        $mapHighlight.attr('class', 'b-map__item__highlight ' + regionCode);
                    }
                }, 'area');

$currentRegion - 它是可变的，是选择区域的答案，正如您所看到的，它已放在我的区域标题中，我也需要将其放在选择中。

我在我的 js 中得到了一些关于 map 坐标的代码。感谢您的帮助!

我的 map 有很多区域，这里我只显示一个:

    <div class="b-map">

        <div class="b-map__city"></div>

        <div class="b-map__item">
            <img class="mapImage" src="/images/map-light.png" width="701" height="408" border="0" usemap="#map" />

            <map name="map">
                <area shape="poly" coords="615,0,554,20,548,87,558,93,554,106,557,112,571,118,592,112,592,104,611,88,618,96,628,93,632,77,639,78,640,52,621,55,614,35,631,20" title="<?php echo isset($this->region['chu']) ? $this->region['chu']['r_name'] : "region name for  chu" ?>" href="#chu" />
</map>

                <div class="b-map__item__highlight"></div>
                <div class="b-map__item__pin"></div>

            </div>

区域不只是一个，大约有60个区域。

Answer 1

嗯，这是一种完全不同的方法，但也许这个方法会给你想要的结果或提示。 :)

HTML

<select id="region-select" name="region-select" size="1">
    <option value="-1">...</option>
    <option value="1">Region #1</option>
    <option value="2">Region #2</option>
    <option value="3">Region #3</option>
</select>
<div id="map">
    <a href="#" title="Title of region #1" id="region-1" class="area">Region #1</a>
    <a href="#" title="Title of region #2" id="region-2" class="area">Region #2</a>
    <a href="#" title="Title of region #3" id="region-3" class="area">Region #3</a>
</div>

CSS

#map {
    width:800px;
    height:370px;
    background:transparent url('http://upload.wikimedia.org/wikipedia/commons/c/c3/World_Map_FIVB.png') top left no-repeat;
    position:relative;
}

#map .area {
    position:absolute;
    display:block;
    text-indent:-9999px;
}

#region-1 {
    top: 40px;
    left:50px;
    height:30px;
    width:100px;
    background-color:#990000;
}

#region-2 {
    bottom: 40px;
    right:400px;
    width:20px;
    height:30px;
    background-color:#009900;
}

#region-3 {
    top:50px;
    right:500px;
    width:40px;
    height:70px;
    background-color:#000099;
}

.area.highlight {
    box-shadow: 0px 0px 4px 8px #333333;
    -webkit-box-shadow: 0px 0px 4px 8px #333333;
    -moz-box-shadow: 0px 0px 4px 8px #333333;
    -o-box-shadow: 0px 0px 4px 8px #333333;
    -ms-box-shadow: 0px 0px 4px 8px #333333;
    opacity:0.75;
    -webkit-opacity:0.75;
    -moz-opacity:0.75;
    -o-opacity:0.75;
    -ms-opacity:0.75;
}

JavaScript

$(document).ready(function() {
    selectRegion = function(ev) {
        if($(this).find('option:selected').val() > 0) {
            $('.area').removeClass('highlight').filter('#region-'+$(this).find('option:selected').val()).addClass('highlight');   
        }
        ev.preventDefault();
    };
    $('#region-select').on('change',selectRegion);
});

http://jsfiddle.net/qhKLR/

另外...如果你有不同区域的透明图像并且不希望这些透明区域是可选的(我在读取给定区域的多边形坐标时假设)你可以尝试我制作的脚本使用 jquery。它允许您将选择限制在图像的非透明区域，还可以触发透明区域后面的元素。 (例如点击率)http://www.cw-internetdienste.de/pixelselection/