Question

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

当我尝试将点添加到热图时，没有显示任何内容，并且没有收到任何服务器或客户端错误。下面，我粘贴了要传递给Java脚本函数的JSON代码片段，该函数应填充热图图层，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

Answer 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

尝试将数据点动态加载到Google热图图层

1 个答案: