如何在java脚本中传递对象数组?

时间:2016-05-11 20:37:26

标签: javascript json google-maps google-maps-api-3

在谷歌地图中我尝试显示我的患者位置我可以通过此功能获取我的患者位置,但我不知道如何将其链接到下一个功能,以显示我的病人在谷歌地图。

 function getPoints() {
    $.ajax({
        type: "POST",
        url: "Patient.asmx/GetPatient",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var Patientlocation = response.d;
            $.each(Patientlocation, function (index, Patientlocation) {
                $('#output').append('new google.maps.LatLng(' + Patientlocation.lat + ' ' + Patientlocation.lng + ')<br/>');
            });
        },
        failure: function (msg) {
            $('#output').text(msg);
        }
    });
}

这是默认的谷歌地图我必须将地图对象从上面的功能传递给它 你能帮忙吗

<script>

    // This example requires the Visualization library. Include the libraries=visualization
    // parameter when you first load the API. For example:
    // <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=visualization">

    var map, heatmap;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 13,
            center: { lat: 34.0475, lng: -118.434 },
            mapTypeId: google.maps.MapTypeId.SATELLITE
        });

        heatmap = new google.maps.visualization.HeatmapLayer({
            data: getPoints(),
            map: map
        });
    }

    function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
    }

    function changeGradient() {
        var gradient = [
      'rgba(0, 255, 255, 0)',
      'rgba(0, 255, 255, 1)',
      'rgba(0, 191, 255, 1)',
      'rgba(0, 127, 255, 1)',
      'rgba(0, 63, 255, 1)',
      'rgba(0, 0, 255, 1)',
      'rgba(0, 0, 223, 1)',
      'rgba(0, 0, 191, 1)',
      'rgba(0, 0, 159, 1)',
      'rgba(0, 0, 127, 1)',
      'rgba(63, 0, 91, 1)',
      'rgba(127, 0, 63, 1)',
      'rgba(191, 0, 31, 1)',
      'rgba(255, 0, 0, 1)'
    ]
        heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
    }

    function changeRadius() {
        heatmap.set('radius', heatmap.get('radius') ? null : 20);
    }

    function changeOpacity() {
        heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
    }

    // Heatmap data: 500 Points
    function getPoints1() {
        return [
      new google.maps.LatLng(34.0482551, -118.434),
      new google.maps.LatLng(34.0442551, -118.444),
      new google.maps.LatLng(34.0422551, -118.454),
      new google.maps.LatLng(34.0402551, -118.464),
      new google.maps.LatLng(34.0502551, -118.474),
      new google.maps.LatLng(34.0522551, -118.484)
    ];
    }
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=visualization&callback=initMap">
</script>

这里是JsonFile

<ArrayOfPatientLocation xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
<PatientLocation>
 <lat>34.0369842</lat>
 <lng>-118.23060729999997</lng>
</PatientLocation>
<PatientLocation>
 <lat>34.0369842</lat>
 <lng>-118.22060729999997</lng>
</PatientLocation>
<PatientLocation>
 <lat>34.0369842</lat>
 <lng>-118.24060729999997</lng>
</PatientLocation>
<PatientLocation>
 <lat>34.0369842</lat>
 <lng>-118.24060729999997</lng>
</PatientLocation>
</ArrayOfPatientLocation>

1 个答案:

答案 0 :(得分:0)

我不熟悉Google Maps API,但我还没有对此进行过测试,但我认为这样的事情应该有效。

首先,修改initMap函数以接受患者位置对象数组,而不是调用函数返回硬编码列表:

// modify initMap to accept an array of location objects
function initMap(patientLocations) {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: { lat: 34.0475, lng: -118.434 },
        mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: patientLocations,
        map: map
    });
}

然后修改您的getPoints ajax函数,将API返回的位置列表映射到Google地图位置对象,并将其传递给initMap

function getPoints() {
    $.ajax({
        type: "POST",
        url: "Patient.asmx/GetPatient",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var patientlocations = response.d;
            // transform array of JSON objects into google maps location objects
            patientlocations = $.map(Patientlocations, function(patentLocation) {
                return new google.maps.LatLng(patentLocation.lat, patentLocation.lng);
            });

            // pass modified locations into initMap()
            initMap(patientLocations);
        },
        failure: function (msg) {
            $('#output').text(msg);
        }
    });
}