Question

我尝试在谷歌地图上显示标记在数据表上有两行，并且在该行中还有经度和纬度列我尝试根据这些lat和long显示我也通过循环在jquery中执行此操作但这显示错误

更新

JQUERY CODE

我尝试使用此代码，并在地图上显示1个标记，但数据表上有2行

1标记显示beacuse i硬编码lat和长值

<script type="text/javascript">
        $(function () {

            var latit = '21.19055';
            var longi = '69.84629';
            var obj = {};
            obj.latit = latit;
            obj.longi = longi;
            getdata(obj);
            return false;
        });

        function getdata(obj) {
            var RegNo = '';
            var Status = '';
            var latit = '';
            var longi = '';
            $.ajax({
                type: "POST",
                url: "home.aspx/info",
                contentType: "application/json;charset=utf-8",
                data: "{'id':'442'}",
                datatype: "json",
                async: true,
                cache: false,
                success: function (result) {

                    alert("map2");

                    $("#tabledata").empty();

                    var table_data = JSON.parse(result.d).response;

                    console.log(JSON.parse(result.d));

                    $("#tabledata").empty();

                    if (table_data.length > 0) {

                 $("#tabledata").append(

      "<thead><tr><th>No</th><th>Longitude</th><th>Latitude</th></tr></thead>");
                   for (var i = 0; i < table_data.length; i++) {

                   if (table_data[i] !== null) {

                   $("#tabledata").append("<tbody><tr><td>" +
                   table_data[i][0] + "</td> <td>" +

                   table_data[i][1] + "</td> <td>" +

                   table_data[i][2] + "</td></tr></tbody>");



                   No = table_data[i][0];

                  latit = table_data[i][2];

                  longi = table_data[i][1];
                            }
                        }
                    }
                    else {
                        $("#tabledata").hide();
                    }

                    var map;
                    debugger;
        var latlng = new google.maps.LatLng(74.0895898, 47.0998546);
                    debugger;
                    var myOptions = {
                        zoom: 8,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    debugger;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    debugger;
                   var marker = new google.maps.Marker
                    (
                        {
        position: new google.maps.LatLng(obj.latit, obj.longi),
                            map: map,
                            title: 'Click me'
                        }
                    );
                    debugger;
                    var infowindow = new google.maps.InfoWindow({
                        content: 'No:' + No,
                        title: 'tr'
                    });
                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.open(map, marker);
                    });
                },
                error: function (error) {
                    alert(error);
                    alert("error");
                }
            });
        }     

</script>

在上面的脚本中这行数据：＆＃34; {＆＃39; id＆＃39;：＆＃39; 442＆＃39;}＆＃34;，因为在info方法上有字符串ID所以我很难这个id上的id。但我不想要硬代码，因为桌子上没有1个id，所以我如何在这个线路上保存这个id

任何解决方案？

Answer 1

这是解决方案

<div id="map" style="height: 400px; width: 500px;">
</div>
<script type="text/javascript">
    var geocoder = new google.maps.Geocoder();
    var address = ["Bondi Beach", "Coogee Beach", "nidhi hospital, ahmedabad", "Sal hospital, ahmedabad", "Maroubra Beach"];
    var latitude = [],
        longitude = [];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: new google.maps.LatLng(23.049356, 72.52376000000004),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    console.log(address.length)
    for (var i = 0; i < address.length; i++) {

        geocoder.geocode({
            'address': address[i]
        }, function(results, status) {

            console.log(1)
            if (status == google.maps.GeocoderStatus.OK) {
                latitude[i] = results[0].geometry.location.lat();
                longitude[i] = results[0].geometry.location.lng();

                console.log(latitude[i], longitude[i])

                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(latitude[i], longitude[i]),
                    map: map
                });
            }

        })
    }

</script>

Answer 2

从设计的角度来看，您的解决方案不正确。绝对不需要在.Net端创建表。

你应该创建一个带有必填字段的DTO（例如'Noo'，'DateTime'，'Status'）在Controller中填充它（或在sort of Factory中）并设置你的API以返回Collection<yourDTO>

如果确实需要创建表，可以稍后使用jQuery。

无论如何，在你调用你的API后，你会得到一堆JSON对象，这些对象可以很容易地迭代，为谷歌地图创建一个或多个标记。

似乎你缺乏一点理论基础。

ASP网站将是一个很好的开始： http://www.asp.net/web-api/overview/data/using-web-api-with-entity-framework/part-5

在谷歌地图上显示多个标记

2 个答案: