Question

正如标题所述，我要放大下拉列表中选择的位置。我在地图上有不同的标记，位置也在下拉列表中，因此当我从下拉列表中选择一个时，我要放大并以该位置为中心。我在这个javascript，jquery事物上还很新，任何帮助将不胜感激。这是我的下拉列表：

    <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>

以下是我的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));
            }
        });

}

这是我在互联网上找到的并试图将其应用于我需要的东西，但是我不确定我是否以正确的方式做到了：

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})
});

Answer 1

我设法解决了我的问题，这是我的代码，以防其他任何人需要这样的东西： 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>

控制器：

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

和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));
            }
        }
    )
}

注意：如果data为null，我让他缩小地图，因为如果从下拉列表中选择Choose a station（这是null），这就是我想要做的。

选择下拉菜单中的值时如何放大？

1 个答案: