尝试将数据点动态加载到谷歌热图图层答案

【问题标题】：trying to dinamically load data points to a google heat map layer尝试将数据点动态加载到谷歌热图图层
【发布时间】：2018-12-04 13:40:45
【问题描述】：

我正在尝试向谷歌地图添加一个热图图层，其中填充了来自 SQL 后端的数据点。到目前为止，我设法显示了地图，并且确实调用了一个代码隐藏方法，该方法返回 JSON 纬度和经度点数组。

当我尝试将点添加到热图中时，没有显示任何内容，并且我没有收到任何服务器或客户端错误。下面我粘贴了我传递给 java 脚本函数的 JSON 的 sn-p，该函数应该填充热图层、html 标记和 java 脚本代码。

最终结果应该是地图上显示的热图图层。目前只显示地图。

“警报（数据）；”正在显示，但“alert(jsonData);”不显示

来自 c# 我正在使用 JSON.NET 来序列化数据。

[{"CoordinatesObject":[{"Latitude":57.149605,"Longitude":-2.096916}]},{"CoordinatesObject":[{"Latitude":57.14871,"Longitude":-2.097806}]},{"CoordinatesObject":[{"Latitude":57.14905,"Longitude":-2.097004}]}]



 <div class="row">
    <div class="col-12 align-content-md-center">
        <div id="floating-panel" class="floating-panel">
            <button onclick="toggleHeatmap()">Toggle Heatmap</button>
            <button onclick="changeGradient()">Change gradient</button>
            <button onclick="changeRadius()">Change radius</button>
            <button onclick="changeOpacity()">Change opacity</button>
        </div>
        <div id="map" class="map">&nbsp;</div>
    </div>
</div>

 var map, heatmap;

    function initMap() {
        var CenterLat = 55.95206;
        var CenterLong = -3.19648;

        var mapCoordinates = {
            center: new google.maps.LatLng(CenterLat, CenterLong),
            zoom: 8,
            mapTypeId: 'roadmap'
        }
        map = new google.maps.Map(document.getElementById('map'), mapCoordinates);

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

    }//end InitMap

function getPoints() {

        var Json =<%=GetJsonData()%>;

        //var jsonData = JSON.parse(Json);

        for (var i = 0; i < Json.length; i++) {
            var LatLongObj = Json.CoordinatesObject[i];
            //ArrLatLong.push("location:" + new google.maps.LatLng(LatLongObj.Latitude, LatLongObj.Longitude));

            var marker = new google.maps.Marker({
                'location': new google.maps.LatLng(LatLongObj.Latitude, LatLongObj.Longitude),
                'map': map,
                'weight': i
            });
        }
    }

请注意，这是我第一次使用 google map API。

编辑： 我的工作解决方案

 var map, heatmap;

    function initMap() {
        var CenterLat = 56.816918399;
        var CenterLong = -4.1826492694;
        var ArrMarkers=[];
        var ServerData =<%=GetJsonData()%>;
         var Latitude ;
         var Longitude;

        for (var i = 0; i < ServerData.length; i++) {

            Latitude = ServerData[i].Latitude;
            Longitude = ServerData[i].Longitude;

            var marker = { location: new google.maps.LatLng(Latitude, Longitude) };
            ArrMarkers.push(marker);

        }

        var mapCoordinates = {
            center: new google.maps.LatLng(CenterLat, CenterLong),
            zoom: 7,
            mapTypeId: 'roadmap'
        };
        map = new google.maps.Map(document.getElementById('map'), mapCoordinates);

        heatmap = new google.maps.visualization.HeatmapLayer({
            data: ArrMarkers,
            radius: 15,
            opacity:0.5,
            map: map
        });

    }//end InitMap

【问题讨论】：

对我来说，数据似乎已经成为一个对象。所以 JSON.parse(data) 不起作用。请注意，getPoints 不会从服务器读取任何内容，它会读取服务器在页面加载时呈现的数据。
你是对的，我已经修改了这个函数，现在我想弄清楚如何循环遍历 Json var
服务器端只有json。一旦它被写入 html，它就变成了一个 javascript 数组文字。所以 arr.CoordinatesObject 没有意义，它必须以 arr[index] 开头...
我设法让它工作了；查看我对我的问题的编辑

标签： javascript c# google-maps

【解决方案1】：

最后的灵魂

var map, heatmap;

function initMap() {
    var CenterLat = 56.816918399;
    var CenterLong = -4.1826492694;
    var ArrMarkers=[];
    var ServerData =<%=GetJsonData()%>;
     var Latitude ;
     var Longitude;

    for (var i = 0; i < ServerData.length; i++) {

        Latitude = ServerData[i].Latitude;
        Longitude = ServerData[i].Longitude;

        var marker = { location: new google.maps.LatLng(Latitude, Longitude) };
        ArrMarkers.push(marker);

    }

    var mapCoordinates = {
        center: new google.maps.LatLng(CenterLat, CenterLong),
        zoom: 7,
        mapTypeId: 'roadmap'
    };
    map = new google.maps.Map(document.getElementById('map'), mapCoordinates);

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: ArrMarkers,
        radius: 15,
        opacity:0.5,
        map: map
    });

}//end InitMap

【讨论】：