如何填写JavaScript数组与C#列表与LT值

如何填写JavaScript数组与C#列表与LT值

本文介绍了C#的ASP.NET MVC项目和谷歌地图:如何填写JavaScript数组与C#列表与LT值;>的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个这样的类:

 公共类标记
    {
        公共双纬度{搞定;组; }
        公共双经度{搞定;组; }        //构造函数和方法
        //(...)
    }

在我的控制器我有标记列表一个ActionResult,我添加经纬度这样

 列表<标志物GT; listM =新的List<标志物GT;(); //注意:这是我的ActionResult,与没有问题之外。
 //(...)
 listM.Add(新标记(值[0],价值[1])); //注意:值[0]是我的纬度和值[1]是我的经度
 //(...)

和结束时我就按照列表返回查看:

 收益率(listM);

现在的查看,我需要访问的数据,并填充数组,所以我可以显示我的谷歌地图上的标记。

如何与位置标记填充数组纬度,经度从我的名单?

  @using ProjectName.Models
@model名单<标志物GT;< HTML和GT;
< HEAD> ...< /头>
<身体GT; ...< /身体GT;
<脚本类型=文/ JavaScript的>//我如何添加一个GoogleMap的标记?
变种markersArray = [];
@foreach(以型号VAR项)
                {
                      //不能使用此google.maps.Marker =的foreach里面(
                }< / SCRIPT>
< / HTML>

注意:这是我如何添加标记的阵列上与地图上点击

 函数addMarker(位置){
                VAR的标记=新google.maps.Marker({
                    拖动:真实,
                    动画:google.maps.Animation.DROP,
                    位置:位置,
                    标题:'炸弹',
                    地图:地图,
                    图示:炸弹
                });
                markersArray.push(标记);
            }

问题2:
标记仍然不显示在@Leo解决方案后的地图!

 <脚本类型=文/ JavaScript的>
            VAR地图;
            VAR地理codeR;
            变种markersArray = [];
            VAR geoMarker;            VAR炸弹=新google.maps.MarkerImage('内容/图片/销/ bomb.png',
            新为google.maps.Size(32,37),
            新google.maps.Point(0,0),
            新google.maps.Point(22,44)
            );            函数初始化(){
                VAR的MapOptions = {
                    中心:新google.maps.LatLng(41.287739,-7.738992)
                    变焦:16,
                    mapTypeId设为:google.maps.MapTypeId.ROADMAP,
                };
                地图=新google.maps.Map(的document.getElementById(地图画布)的MapOptions);
                @foreach(以型号VAR项)
                {
                    <文字和GT;
                    VAR位置= google.maps.LatLng('@ item.latitude','@ item.longitude',FALSE);
                addMarker(处);
                   < /文字和GT;
                }                地理codeR =新google.maps.Geo codeR();                对于(VAR I = 0; I< markersArray.length;我++){
                    markersArray [I] .setMap(图)
                }
                geoMarker =新GeolocationMarker(图)
                geoMarker.setCircleOptions({填充颜色:'#808080'});
                google.maps.event.addListenerOnce(geoMarker,'position_changed',函数(){
                    map.setCenter(this.getPosition());
                    map.fitBounds(this.getBounds());
                });
                google.maps.event.addListener(geoMarker,'geolocation_error'功能(E){
                    警报('发生错误的获取位置信息:'+ e.message);
                });                geoMarker.setMap(地图);                google.maps.event.addDomListener(窗口'负荷',初始化);
                google.maps.event.addListener(地图,'点击',功能(事件){
                    addMarker(event.latLng);
                });
                google.maps.event.addListener(地图部分zoom_changed',函数(){                    变种当zoomLevel = = map.getZoom();
                    //map.setCenter(myLatLng);
                    的document.getElementById('mapzoom')的innerHTML =缩放:+个zoomLevel;
                });
            }
            功能showAddress(){
                警报(奥钢联navegar段结尾endereço!);
                VAR地址=的document.getElementById('txtAddress')值。
                地理coder.geo code({'地址':地址},功能(结果状态){
                    如果(状态== google.maps.Geo coderStatus.OK){
                        map.setCenter(结果[0] .geometry.location);
                        VAR的标记=新google.maps.Marker({
                            图:熔点,
                            位置:结果[0] .geometry.location
                        });
                    }其他{
                        警报('错误:'+状态);
                    }
                });            }
            功能addMarker(位置){
                VAR的标记=新google.maps.Marker({
                    拖动:真实,
                    动画:google.maps.Animation.DROP,
                    位置:位置,
                    标题:邦巴,
                    地图:地图,
                    图示:炸弹
                });
                markersArray.push(标记);
            }
            功能setAllMap(图){
                对于(VAR I = 0; I< markersArray.length;我++){
                    markersArray [I] .setMap(图)
                }
            }
            功能clearMarkers(){
                setAllMap(NULL);
            }            功能showMarkers(){
                setAllMap(地图);
            }
            功能deleteMarkers(){
                clearMarkers();
                markersArray = [];
            }
            功能loadScript(){
                VAR脚本=使用document.createElement('脚本');
                script.type =文/ JavaScript的';
                script.src ='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
                    '回调=初始化';
                document.body.appendChild(脚本);
            }            在window.onload = loadScript;
            如果(!navigator.geolocation){
                警报('您的浏览器不支持地理定位');
            }
        < / SCRIPT>


解决方案

试试这个.....

 <脚本>
    变种markersArray = [];
    VAR _MAP = NULL;
    VAR _c = NULL;
    @foreach(以型号VAR项)
    {
         <文字和GT;
             markersArray.push(新google.maps.Marker({
                 拖动:真实,
                 动画:google.maps.Animation.DROP,
                 位置:新google.maps.LatLng('@ item.latitude','@ item.longitude,假),
                 标题:不管标题',
                 图:_MAP
             }));
         < /文字和GT;
     }
 < / SCRIPT>

第二个问题

我不得不仔细看一下您的code,并发现你已经提到这三个问题......他们中的一个。其他的人是你重复的变量名,你是不是实例化一个新的对象。现在改变了....

  @foreach(以型号VAR项)
            {
                <文字和GT;
                VAR位置= google.maps.LatLng('@ item.latitude','@ item.longitude',FALSE);
            addMarker(处);
               < /文字和GT;
            }

这个....

  @foreach(以型号VAR项)
            {
                <文字和GT;
            addMarker(新google.maps.LatLng(parseFloat('@ item.latitude'),parseFloat('@ item.longitude')));
               < /文字和GT;
            }

让我知道如何去

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

 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!

  <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>
解决方案

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. 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项目和谷歌地图:如何填写JavaScript数组与C#列表与LT值;&GT;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-03 17:51