Question

我有一个小应用程序，可以从数据库中检索数据并显示信息。这是所有车辆信息，其中两个字段是纬度和经度。

我正在尝试在用户点击“＃34;详细信息”时显示地图。但我无法弄清楚如何将模型数据输入到函数中以便显示。

我尝试了什么。

//Setting a hidden input equal to the value
<input type='hidden' id='test-lat' value='@Html.Display(model => model.Lat)' />

//Then starting the script
<script>
       var a = $('#test-lat').val();
       var map;
       function initMap() {
           map = new google.maps.Map(document.getElementById('map'), {
               center: {lat: a, lng: 41},
               zoom: 8
           });
       }
</script>

这只是给了我一个灰色的框

Answer 1

无需使用隐藏控件，可以直接将模型值作为参数实现。

    <script>
    $(document).ready(function () {
        initialize();
    });
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng('@Model.Lat', '@Model.Lng'),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        // create a marker
        var latlng = new google.maps.LatLng('@Model.Lat', '@Model.Lng');
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Vehicle Place'
        });
    }
</script>

从模型数据中使用Lat Long来填充谷歌地图坐标

1 个答案: