简体   繁体   English

选择下拉列表中的值时如何放大?

[英]How to zoom in when a value from a drop-down is selected?

As the title says i want to zoom on the location selected in the drop-down list. 正如标题所示,我想放大下拉列表中选择的位置。 I have different markers on the map, locations which are in the drop-down too, so when i chose one from the drop-down i want to zoom in and center on the location. 我在地图上有不同的标记,也在下拉列表中的位置,所以当我从下拉列表中选择一个时,我想放大并以中心位置为中心。 I'm pretty new at this javascript, jquery thing and any help would be highly appreciated. 我对这个javascript,jquery的事情很新,任何帮助都会受到高度赞赏。 Here is my drop-down list: 这是我的下拉列表:

    <div>
        <select class="form-control" id="selectedValue" >
            <option>--Select--</option>
            @foreach (var item in ViewBag.ListOfDropdown)
            {
                <option value="@item.Id">@item.Name</option>
            }
        </select>
    </div>

Here is how my Google Maps is rendered and populated: 以下是我的Google地图的呈现和填充方式:

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'),
        {
            center: { lat: 46.770920, lng: 23.589920 },
            zoom: 13
        });

    $.get("/Home/GetAllLocation",
        function (data, status) {
            var marker = [];
            var contentString = [];
            var infowindow = [];
            for (var i = 0; i < data.length; i++) {

                marker[i] = new google.maps.Marker({
                    position: { lat: data[i].latitudine, lng: data[i].longitudine },
                    map: map
                });

                contentString[i] = '<div id="content">' +
                    '<div id="siteNotice">' +
                    '</div>' +
                    '<h1 id="firstHeading" class="firstHeading">' +
                    data[i].name +
                    '</h1>' +
                    '<div id="bodyContent">' +
                    '<p><b> Numar locuri Fast Charging: </b>' +
                    data[i].nrOfBikes +
                    '<p><b> Numar locuri care nu-s Fast Charging: </b>' +
                    data[i].nrOfAvailableBikes +
                    '<a href="@Url.Action("Index", "Home")" ><p>View Details</a>' +
                    '<form asp-action=""><div><input type="submit" value="Open" class="btn btn-success"> <input type="submit" value="Close" class="btn btn-danger"></div></form>';

                infowindow[i] = new google.maps.InfoWindow({
                    content: contentString[i]
                });
                var mdl = marker[i];
                google.maps.event.addListener(marker[i],
                    'click',
                    (function (mdl, i) {
                        return function () {
                            infowindow[i].open(map, marker[i]);
                            for (var j = 0; j < infowindow.length; j++) {
                                if (j != i) {
                                    infowindow[j].close();
                                }

                            }
                        }
                    })(marker[i], i));
            }
        });

}

And here is what i have found on the internet and tried to apply to what i need, but i'm not sure i did it in the right way: 这是我在互联网上找到的并试图应用于我需要的东西,但我不确定我是以正确的方式做到的:

jQuery(document).on('change', '#selectedValue', function() {
    var latlngzoom = jQuery(this).val();
    var newzoom = 1 * latlngzoom[2];
    newlat = 1 * latlngzoom[0];
    newlng = 1 * latlngzoom[1];
    map.setZoom(newzoom);
    map.setCenter({lat:newlat, lng: newlng})
});

I managed to resolve my question and here is my code, in case anyone else will ever need something like that: The cshtml drop-down: 我设法解决了我的问题,这是我的代码,以防其他人需要这样的东西:cshtml下拉列表:

        <select class="form-control" id="selectedValue" onchange="GoToLocation(this.value)">
            <option>Choose a station...</option>
            @foreach (var item in ViewBag.ListOfDropdown)
            {
                <option value="@item.Id">@item.Name</option>
            }
        </select>

The Controller: 控制者:

        public JsonResult GetAllLocationById(int? id)
        {
            var data = _context.Stations.Where(m => m.Id == id).SingleOrDefault();
            return Json(data);
        }

And the JavaScript function: 和JavaScript功能:

function GoToLocation(locationId) {
    $.get("/UserMap/GetAllLocationById?id=" + locationId,
        function (data, status) {
            if (data != null) {
                map.setCenter(new google.maps.LatLng(data.latitudine, data.longitudine));
                map.setZoom(17);
            } else {
                map.setZoom(13);
                map.panTo(new google.maps.LatLng(46.770920, 23.589920));
            }
        }
    )
}

NOTE: if the data is null, i let him zoom-out the map, because that's what i wanted to do if choosing Choose a station from the drop-down, which was coming as null. 注意:如果data为空,我让他缩小地图,因为如果选择从下拉列表中Choose a station ,那就是我想要做的事情。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如果下拉列表与json键绑定,如何从下拉列表中获取所选值 - how to get selected value from Drop-down, if drop-down is binded with keys of json 从下拉列表中选择“其他”时动态要求文本框 - Dynamically require textbox when “Other” selected from a drop-down 如何使用JavaScript / JQuery获取下拉列表的选定值 - How to get the selected value of a drop-down list with JavaScript/JQuery 回发后如何在下拉列表中保留所选值? - How to preserve selected value in drop-down list after postback? 如何更改下拉列表中的选定值 - How change the selected value in drop-down list 如何使用 jQuery 覆盖下拉列表的选定值 - How to override the selected value of a drop-down list with jQuery 如何在不重新加载页面或不使用按钮的情况下显示(选择下拉菜单)中选定的文本值 - How to display the selected text value from (select drop-down) without reload the page or using button 如何有条件地测试下拉列表中的所选选项/值 - How conditionally test the selected option/value from a drop-down list 如何验证是否使用JavaScript从下拉列表中未选择任何内容 - how to validate if nothing is selected from drop-down using JavaScript 从下拉菜单中选择特定选项时如何document.write - How to document.write when specific option selected from drop-down menu
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM