Question

我最近将SELECT菜单从标准格式更改为Select 2菜单。由于此更改，我的值“”字段似乎没有携带值到地图。当我从列表中选择一个项目时，它应该触发它在地图上显示的相应信息框，但他已停止工作。有什么想法吗？

Google地图代码示例：

<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(42.3443961,-71.0853170);
        var settings = {
            zoom: 14,
            center: latlng,
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            mapTypeId: google.maps.MapTypeId.ROADMAP};
        var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

<!--START Boston Medical Center-->      
        var contentStringboscen = '<div class="contentmap">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h2 id="firstHeading" class="firstHeading">Boston Medical Center</h2>'+
            '<div id="bodyContent">'+
            '<p>Boston Medical Center (BMC) is a 496-bed academic medical center located in Boston’s historic South End. The hospital is the primary teaching affiliate for Boston University School of Medicine.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringboscen
        });

        var boscenImage = new google.maps.MarkerImage('images/map-icons/local-attractions/a.png',
            new google.maps.Size(40,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var boscenShadow = new google.maps.MarkerImage('images/map-icons/local-attractions/a-shadow.png',
            new google.maps.Size(40,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var boscenPos = new google.maps.LatLng(42.3344236,-71.0744651);

        var boscenMarker = new google.maps.Marker({
            position: boscenPos,
            map: map,
            icon: boscenImage,
            shadow: boscenShadow,
            title:"Boston Medical Center",
            zIndex: 3});
<!--STOP Boston Medical Center-->

<!--START Boston Public Library-->      
        var contentStringboslib = '<div class="contentmap">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h2 id="firstHeading" class="firstHeading">Boston Public Library</h2>'+
            '<div id="bodyContent">'+
            '<p>The Boston Public Library (est.1848) is a municipal public library system in Boston, Massachusetts, United States. It was the first publicly supported municipal library in the United States, the first large library open to the public in the United States, and the first public library to allow people to borrow books and other materials and take them home to read and use.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringboslib
        });

        var boslibImage = new google.maps.MarkerImage('images/map-icons/local-attractions/b.png',
            new google.maps.Size(40,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var boslibShadow = new google.maps.MarkerImage('images/map-icons/local-attractions/b-shadow.png',
            new google.maps.Size(40,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var boslibPos = new google.maps.LatLng(42.349484,-71.077740);

        var boslibMarker = new google.maps.Marker({
            position: boslibPos,
            map: map,
            icon: boslibImage,
            shadow: boslibShadow,
            title:"Boston Public Library",
            zIndex: 3});
<!--STOP Boston Public Library-->

        google.maps.event.addListener(boscenMarker, 'click', function() {
            infowindow.setContent(contentStringboscen);
            infowindow.open(map,boscenMarker);
        });
        google.maps.event.addListener(boslibMarker, 'click', function() {
            infowindow.setContent(contentStringboslib);
            infowindow.open(map,boslibMarker);
        });

        var selectChoices = {
            boscenChoice: boscenMarker,
            boslibChoice: boslibMarker,
        };

        google.maps.event.addDomListener(
            document.getElementById("selectLocation"), 'change',
            function() {
            google.maps.event.trigger(selectChoices[this.value], "click");
        });

    }
</script>

选择2代码：

<link type="text/css" rel="stylesheet" href="select2/select2.css">
<script src="select2/select2.js"></script>
<script>
var men=jQuery;
    men.noConflict();
men(document).ready(function() {
men('#selectLocation').select2(
    {
        placeholder: "Choose an Attraction",
        width:'400px',
        formatResult: format,
        formatSelection: format,
    });
function format(option) {
    if (option.id.indexOf('Choice') != -1) {
        return "<span style='display:inline-block;width:20px'>" + option.text.substring(0,2) + "</span>" + option.text.substring(2)
    } else {
        return option.text
    }
}
});
</script>

选择2菜单：

<div class="general-bg" style="background-color:#ffffff; border-bottom:solid 1px #cccccc">
    <div id="map-nav" style="width:400px;margin:10px auto 10px auto; background-color:#ffffff;">
        <select id="selectLocation" style="color:#09F; font-size:18px; font-family:'Century Gothic W01';" name="categories">
            <option></option>
            <option value='boscenChoice'>A. Boston Medical Center</option>
            <option value='boslibChoice'>B. Boston Public Library</option>
            <option value='chrcenChoice'>C. Christian Science Center</option>
            <option value='chuapaChoice'>D. Church Park Apartments</option>
            <option value='copplaChoice'>E. Copley Place Shopping</option>
            <option value='fenparChoice'>F. Fenway Park</option>
            <option value='findisChoice'>G. Financial District</option>
            <option value='houbluChoice'>H. House of Blues</option>
            <option value='huntheChoice'>I. Huntington Theatre</option>
            <option value='isamusChoice'>J. Isabella Stewart Gardener Museum</option>
            <option value='logairChoice'>K. Logan International Airport</option>
            <option value='lonmedChoice'>L. Longwood Medical and Academic Area</option>
            <option value='mashosChoice'>M. Massachusetts General Hospital</option>
            <option value='mastecChoice'>N. Massachusetts Institute of Technology</option>
            <option value='musartChoice'>O. Museum of Fine Arts</option>
            <option value='newstrChoice'>P. Newbury Street Shopping</option>
            <option value='prucenChoice'>Q. Prudential Center Shopping</option>
            <option value='pubgarChoice'>R. Public Garden</option>
            <option value='symhalChoice'>S. Symphony Hall</option>
        </select>
    </div>
</div>

Answer 1

你的问题来自Select2行为。

当您在Select2中选择新条目时，<option>内<select id="selectLocation">内的html属性将不会更新为＆＃34;已选择＆＃34;像普通的选择一样。 Select2将更新<span class"select2-selection__rendered">并在javascript中触发2个事件：change和select2:select

从那里我们了解到您的代码需要在此更新：

google.maps.event.addDomListener(
    document.getElementById("selectLocation"), 'change',
    function() {
    google.maps.event.trigger(selectChoices[this.value], "click");
});

这些是要解决的问题

您附加的地点document.getElementById("selectLocation")不会触发。您需要将其附加到上面提到的select2事件或直接附加到<span class="select2-selection__rendered">
如果您获得值google.maps.event.trigger(selectChoices[this.value], "click")，则由于<option>不会更新，您需要从select2事件，select2实例或直接在<span class="select2-selection__rendered">上获取值

P.S。使用<span class="select2-selection__rendered">将是一个非常快速的修复代码。选择select2事件和select2实例是一种更好的方法，但申请时间更长，需要更多的学习。

获取Google Map Api v3的Select2值

1 个答案: