我如何使用JavaScript在Razor谷歌地图API

How can I use JavaScript in Razor for google maps API

本文关键字：Razor 谷歌地图 API JavaScript 何使用      更新时间：2023-09-26

我试图使用'foreach'循环使用数据库中的坐标在地图上放置一系列标记。数据的检索不是一个问题，所以现在我不担心地图显示正确的位置。问题是，当在'foreach'循环中，任何用于标记位置的代码都会立即传递过去。什么好主意吗?

下面是当前代码:

<script>
    function myMap() {
        var lat = 52.4283381;
        var lng = -1.601519;
        var myLatLng = { lat: 52.428381, lng: -1.601519 };
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: new google.maps.LatLng(lat, lng)
        });
    }
</script>
<script>
    @foreach (var mapVars in ViewData.Model)
    {
        <text>
        var marker = new google.maps.Marker
        ({
            position: new google.maps.LatLng (52.428381 , -1.601519),
            map: map,
            title: "" + i,
        });
        </text>
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfvqLwEOTU3oFoiJOmmloYJFYUA801lF8&callback=myMap"></script>

尝试序列化您的ViewData。模型到一个javascript对象，然后从那里循环。

像这样:

<script>
    function myMap() {
        var lat = 52.4283381;
        var lng = -1.601519;
        var myLatLng = { lat: 52.428381, lng: -1.601519 };
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: new google.maps.LatLng(lat, lng)
        });
    }
</script>
<script>
    window.data = @(Html.Raw(js.Serialize(ViewData.Model)));
    var markers = [];
    for(i = 0; i < window.data.length; i++)
    {
        markers.push(new google.maps.Marker
        ({
            position: new google.maps.LatLng (52.428381 , -1.601519),
            map: map,
            title: "" + i,
        }));
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfvqLwEOTU3oFoiJOmmloYJFYUA801lF8&callback=myMap"></script>
相关文章：