Question

我有一张不同地区的地图。我需要的是当我在地图上的区域点击（.slick功能js）时，它与我的选择相关联：

<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用于我的地图和onclick功能，这里是区域已经与标题绑定，所以我需要它与选择绑定：

            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中找到了一些关于地图协调的代码。谢谢你的帮助！

我的地图有很多区域，这里我只展示一个：

    <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。它允许您限制对图像的非透明区域的选择，并触发透明区域后面的元素。（f.e。点击）http://www.cw-internetdienste.de/pixelselection/

将地图与select相关联

1 个答案: