JavaScript 仅检测陆地或水域 Google map

Question

我很难找出一种仅用 JavaScript 来检测特定(纬度、经度)的土地与水域的方法。使用 Canvas 使其工作并绕过 Chrome 污染的 Canvas 错误。我想我应该提出问题并回答。

Answer 1

function landOrWater( lat, lng, callback ) {
    var map_url = "http://maps.googleapis.com/maps/api/staticmap?center="+lat+","+lng+"&zoom="+map.getZoom()+"&size=1x1&maptype=roadmap"
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    var image = new Image();
    image.crossOrigin = "Anonymous"; // dope hack
    image.src = map_url;

    image.onload = function() {
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
        var pixelData = canvas.getContext('2d').getImageData(0, 0, 1, 1).data;
        if( pixelData[0] > 160 && pixelData[0] < 181 && pixelData[1] > 190 && pixelData[1] < 210 ) {
            result = "water";
        } else {
            result = "land";
        }
        callback(result);
    }
}

landOrWater( somelat, somelong, function(result){
    console.log( result );
});