Ошибка при использовании bing ClusterLayer (clientWidth) - PullRequest
Новая
       7

Ошибка при использовании bing ClusterLayer (clientWidth)

0 голосов
/ 10 мая 2018

Я пытаюсь реализовать карту bing v8 с кластеризацией (после того, как Google сообщил, что они сейчас заряжаются!)

Это очень похоже на код, включенный здесь

Bing Map V8 Cluster Pass данные в реальном времени

Когда я запускаю свой код как страницу .html, это нормально, но когда я копирую его в свой код .aspx, я получаю ошибку во время выполнения:

Строка: 15 Ошибка: невозможно получить свойство clientWidth с неопределенной или нулевой ссылкой

Снимок экрана - Невозможно получить свойство clientWidth

Есть какие-нибудь подсказки о том, что мне не хватает?

код ниже: 

<div id="map"></div>
<script type="text/javascript">
    var mapData = [{"Name":"Point: 0","Latitude":51.416346228135600,"Longitude":-2.587139903399860},
               {"Name":"Point: 1","Latitude":52.904071793151100,"Longitude":-0.925529754840399},
               {"Name":"Point: 2","Latitude":50.489062124397300,"Longitude":-3.540111038193650},
               {"Name":"Point: 3","Latitude":50.877865648140100,"Longitude":-2.079387722706020},
               {"Name":"Point: 4","Latitude":51.732633037086400,"Longitude":-2.364327677002100},
               {"Name":"Point: 5","Latitude":52.064170929910100,"Longitude":-2.194340144515430},
               {"Name":"Point: 6","Latitude":51.320099000000000,"Longitude":0.437626000000000},
               {"Name":"Point: 7","Latitude":53.648540950000000,"Longitude":-2.317546000000000},
               {"Name":"Point: 8","Latitude":53.143149502624500,"Longitude":-0.239100278665358},
               {"Name":"Point: 9","Latitude":51.590275095134300,"Longitude":-0.171886722408213},
               {"Name":"Point: 10","Latitude":52.443390640000000,"Longitude":-2.043709192000000},
               {"Name":"Point: 11","Latitude":53.675369000000000,"Longitude":-1.268747000000000},
               {"Name":"Point: 12","Latitude":50.986732103214000,"Longitude":-3.187316000000000},
               {"Name":"Point: 13","Latitude":51.508175577980500,"Longitude":-3.201630756099410},
               {"Name":"Point: 14","Latitude":50.934789973542000,"Longitude":-1.558393682425550},
               {"Name":"Point: 15","Latitude":52.804543000000000,"Longitude":-2.105305840218200},
               {"Name":"Point: 16","Latitude":50.871333440000000,"Longitude":0.168831300000000},
               {"Name":"Point: 17","Latitude":51.502795505561000,"Longitude":-0.822373797884838},
               {"Name":"Point: 18","Latitude":51.564688561837500,"Longitude":-1.801687069033250}];

    var map, clusterLayer;

    function GetMap() {
        map = new Microsoft.Maps.Map('#groupsMap',{
            credentials: '**************',
            mapTypeId: Microsoft.Maps.MapTypeId.ordnanceSurvey,
            center: new Microsoft.Maps.Location(52.77133344, -1.605305840218200),
            zoom: 7 });

        Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
            var pins = [];

            for(var i = 0;i < mapData.length;i++){
                var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(mapData[i].Latitude, mapData[i].Longitude));

                //Store the original data object in the pushpins metadata so that you can access other properties like Name.
                pin.metadata = mapData[i];

                pins.push(pin);
            }

            //Create a ClusterLayer with options and add it to the map.
            clusterLayer = new Microsoft.Maps.ClusterLayer(pins, {
                clusteredPinCallback: customizeClusteredPin
            });
            map.layers.insert(clusterLayer);
        });
    }

    function customizeClusteredPin(cluster) {
        //Add click event to clustered pushpin
        Microsoft.Maps.Events.addHandler(cluster, 'click', clusterClicked);
    }

    function clusterClicked(e) {
        if (e.target.containedPushpins) {
        var locs = [];
        for (var i = 0, len = e.target.containedPushpins.length; i < len; i++) {
            //Get the location of each pushpin.
            locs.push(e.target.containedPushpins[i].getLocation());
        }

            //Create a bounding box for the pushpins.
            var bounds = Microsoft.Maps.LocationRect.fromLocations(locs);

            //Zoom into the bounding box of the cluster. 
            //Add a padding to compensate for the pixel area of the pushpins.
            map.setView({ bounds: bounds, padding: 100 });
        }
    }
</script>

<script type="text/javascript" src="http://www.bing.com/api/maps/mapcontrol?callback=GetMap" defer="defer"></script>

1 Ответ

0 голосов
/ 11 мая 2018

Обнаружил мою ошибку ... потерял оператор при копировании и вставке в aspx

...