C＃ASP.NET MVC项目和Google Maps：如何使用C＃List <>中的值填充JavaScript数组

Question

I have a Class like this: 我有一个这样的类：

public class Markers
    {
        public double latitude { get; set; }
        public double longitude { get; set; }

        //Constructors and Methods
        //(...)
    }

On my Controller I have an ActionResult with a List of Markers and I add latitude and longitude like this 在我的控制器上，我有一个带有标记列表的ActionResult，我像这样添加纬度和经度

 List<Markers> listM = new List<Markers>(); //NOTE: this is outside of my ActionResult, no problem with that.
 //(...)
 listM.Add(new Markers(value[0], value[1])); //NOTE: value[0] is my lat and value[1] is my longitude
 //(...)

And at the end i return my list to the View: 最后我将我的列表返回到视图：

return (listM);

Now on the View, I need to access the data and fill an array so I can display the markers on my google map. 现在在视图上，我需要访问数据并填充数组，以便我可以在谷歌地图上显示标记。

How to fill the array with markers in position lat, long from my list? 如何用列表中的标记填充数组？

@using ProjectName.Models
@model List<Markers>

<html>
<head>...</head>
<body>...</body>
<script type="text/javascript">

//How can I add a GoogleMap Marker ?
var markersArray = [];
@foreach(var item in Model)
                {
                      //can't use google.maps.Marker inside this foreach =(
                }

</script>
</html>

NOTE: This is how I add a marker on that array with a click on the map. 注意：这是我通过点击地图在该阵列上添加标记的方法。

function addMarker(location) {
                var marker = new google.maps.Marker({
                    draggable: true,
                    animation: google.maps.Animation.DROP,
                    position: location,
                    title: 'Bomb',
                    map: map,
                    icon: bomb
                });
                markersArray.push(marker);
            }

Question 2: Markers still doesn't show on map after @Leo Solution! 问题2：在@Leo解决方案之后，标记仍未在地图上显示！

  <script type="text/javascript">
            var map;
            var geocoder;
            var markersArray = [];
            var geoMarker;

            var bomb = new google.maps.MarkerImage('Content/Images/Pins/bomb.png',           
            new google.maps.Size(32, 37), 
            new google.maps.Point(0, 0), 
            new google.maps.Point(22, 44) 
            );



            function initialize() {


                var mapOptions = {
                    center: new google.maps.LatLng(41.287739, -7.738992),
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                };


                map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);


                @foreach(var item in Model)
                {
                    <text>
                    var locations = google.maps.LatLng('@item.latitude', '@item.longitude', false);
                addMarker(locations);
                   </text>
                }



                geocoder = new google.maps.Geocoder();

                for (var i = 0; i < markersArray.length; i++) {
                    markersArray[i].setMap(map);
                }


                geoMarker = new GeolocationMarker(map);
                geoMarker.setCircleOptions({ fillColor: '#808080' });
                google.maps.event.addListenerOnce(geoMarker, 'position_changed', function () {
                    map.setCenter(this.getPosition());
                    map.fitBounds(this.getBounds());
                });
                google.maps.event.addListener(geoMarker, 'geolocation_error', function (e) {
                    alert('There was an error obtaining your position. Message: ' + e.message);
                });

                geoMarker.setMap(map);

                google.maps.event.addDomListener(window, 'load', initialize);


                google.maps.event.addListener(map, 'click', function (event) {
                    addMarker(event.latLng);
                });


                google.maps.event.addListener(map, 'zoom_changed', function () {

                    var zoomLevel = map.getZoom();           
                    //map.setCenter(myLatLng);
                    document.getElementById('mapzoom').innerHTML = 'Zoom: ' + zoomLevel;
                });


            }


            function showAddress() {
                alert("Vai navegar para outro endereço!");
                var address = document.getElementById('txtAddress').value;
                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: mp,
                            position: results[0].geometry.location
                        });
                    } else {
                        alert('error: ' + status);
                    }
                });

            }


            function addMarker(location) {
                var marker = new google.maps.Marker({
                    draggable: true,
                    animation: google.maps.Animation.DROP,
                    position: location,
                    title: 'Bomba',
                    map: map,
                    icon: bomb
                });
                markersArray.push(marker);
            }


            function setAllMap(map) {
                for (var i = 0; i < markersArray.length; i++) {
                    markersArray[i].setMap(map);
                }
            }


            function clearMarkers() {
                setAllMap(null);
            }

            function showMarkers() {
                setAllMap(map);
            }


            function deleteMarkers() {
                clearMarkers();
                markersArray = [];
            }


            function loadScript() {
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
                    'callback=initialize';
                document.body.appendChild(script);
            }

            window.onload = loadScript;


            if (!navigator.geolocation) {
                alert('Your browser does not support geolocation');
            }


        </script>

Answer 1

Try this..... 试试这个.....

 <script>
    var markersArray = [];
    var _map = null;
    var _c = null;


    @foreach(var item in Model)
    {
         <text>
             markersArray.push(new google.maps.Marker({
                 draggable: true,
                 animation: google.maps.Animation.DROP,
                 position: new google.maps.LatLng('@item.latitude', '@item.longitude', false),
                 title: 'Whatever title',
                 map: _map
             }));
         </text>
     }
 </script>

Second Question 第二个问题

I had to carefully look at your code and found 3 problems...one of them you've already mentioned it. 我不得不仔细查看你的代码，发现了3个问题......其中一个你已经提到过了。 The other ones are that you are duplicating variable names and you are not instantiating a new object. 其他的是你复制变量名而你没有实例化一个新对象。 Now change this.... 现在改变这个....

      @foreach(var item in Model)
            {
                <text>
                var locations = google.maps.LatLng('@item.latitude', '@item.longitude', false);
            addMarker(locations);
               </text>
            }

to this.... 对......

        @foreach(var item in Model)
            {
                <text>
            addMarker(new google.maps.LatLng(parseFloat('@item.latitude'), parseFloat('@item.longitude')));
               </text>
            }

Let me know how it goes 让我知道事情的后续

C＃ASP.NET MVC项目和Google Maps：如何使用C＃List <>中的值填充JavaScript数组

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-12-13 04:27:21

Second Question 第二个问题

C＃ASP.NET MVC项目和Google Maps：如何使用C＃List &lt;&gt;中的值填充JavaScript数组

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-12-13 04:27:21

Second Question 第二个问题

C＃ASP.NET MVC项目和Google Maps：如何使用C＃List <>中的值填充JavaScript数组

解决方案1
2 已采纳 2013-12-13 04:27:21