Google Maps API V3: масштабирование до состояния с большинством маркеров - PullRequest
Новая
       1

Google Maps API V3: масштабирование до состояния с большинством маркеров

0 голосов
/ 13 декабря 2011

Мне было дано требование установить центр и увеличить масштаб до уровня состояния, в котором я установил наибольшее количество маркеров на карте Google.Все данные, с которыми я работаю, представляют собой набор точек (широта / долгота).

Я понимаю, что могу сделать вызов геолокации (http://code.google.com/apis/maps/documentation/geocoding/index.html#GeocodingRequests - См .: Обратное геокодирование) для каждой точки, а затем подсчитать состояния, чтобы определить, какой из них мне следует показать, но, поскольку будет несколько сотентысячи точек за карту, это не практично.

Есть ли что-нибудь еще, что я могу сделать, чтобы достичь этого?Возможно ли что-нибудь похожее (например, центр высокой концентрации маркеров)?

Ответы [ 2 ]

1 голос
/ 14 декабря 2011

Вот пример страницы, которая реализует метод сетки, который я упоминал ранее. По своей концепции он похож на Брайана, но, поскольку он является простым делением для определения того, какой сектор в сетке, он может быть немного быстрее для больших наборов данных (но вы теряете специфичность состояния): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Center</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
#wrap {width:960px;margin-right:auto;margin-left:auto;position:relative;}
#map_canvas {width:100%;height:700px;}
table,td {border-collapse:collapse;border:thin #000 solid;}
</style>
</head>
<body>
<div id="wrap">
<div id="map_canvas"></div>
<div id="tabular"></div>
<script type="text/javascript">
function randomFromTo(from, to){
    return Math.floor(Math.random() * (to - from + 1) + from);
}
    var map;
    var placesToFilter=Array();
    var myOptions = {zoom: 6,mapTypeControl: false,mapTypeId: google.maps.MapTypeId.ROADMAP};
    //---Creating random data
    for(i=0;i<500;i++){
        var a=new Object();
        a.lat=randomFromTo(2600,4900)/100;
        a.lng=-randomFromTo(6600,12500)/100;
        placesToFilter.push(a);
    }
    //---Get max and min latitude
    var maxLat=placesToFilter[0].lat*1;
    var minLat=placesToFilter[0].lat*1;
    for (i=1;i<placesToFilter.length;i++) {
        if (placesToFilter[i].lat*1>maxLat) {maxLat=placesToFilter[i].lat*1;}
        if (placesToFilter[i].lat*1<minLat) {minLat=placesToFilter[i].lat*1;}
    }
    //---Get max and min longitude
    var maxLng=placesToFilter[0].lng*1;
    var minLng=placesToFilter[0].lng*1;
    for (i=1;i<placesToFilter.length;i++) {
        if (placesToFilter[i].lng*1>maxLng) {maxLng=placesToFilter[i].lng*1;}
        if (placesToFilter[i].lng*1<minLng) {minLng=placesToFilter[i].lng*1;}
    }
    var s=8;//--------------------How many rows/columns the area gets gridded into
    var latDelta=maxLat-minLat;
    var lngDelta=maxLng-minLng;
    var latStep=latDelta/s;
    var lngStep=lngDelta/s;
    var latBands=Array();
    for(i=1;i<=s;i++){latBands.push(i*latStep);}
    var lngBands=Array();
    for(i=1;i<=s;i++){lngBands.push(i*lngStep);}
    //---Keeping score in these arrays
    var gridCount=new Array();
    for(var x=0;x<s;x++){
        for(var y=0;y<s;y++){
            var cell=[x,y];
            gridCount.push(cell);
        }
    }
    for(var lt=0;lt<s;lt++){
        for(var lg=0;lg<s;lg++){
            gridCount[lt][lg]=0;
        }
    }

    map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);

    for(p=0;p<placesToFilter.length;p++){
        //---Keeping track of which grid sector 
        var whichLat=Math.floor((placesToFilter[p].lat-minLat)/latStep);
        var whichLng=Math.floor((placesToFilter[p].lng-minLng)/lngStep);
        gridCount[whichLat][whichLng]++;
        //---And placing the marker
        var point=new google.maps.LatLng(placesToFilter[p].lat,placesToFilter[p].lng);
        var marker = new google.maps.Marker({position: point,map: map});
    }
    //---Figuring out which cell 'won'
    var checking=gridCount[0][0];
    var rightLat;
    var rightLng;
    for(lt=0;lt<s;lt++){
        for(lg=0;lg<s;lg++){
            if(gridCount[lt][lg]>checking){
                checking=gridCount[lt][lg];
                rightLat=lt;
                rightLng=lg;
            }
        }
    }
    //convert grid sector to lat/lng (center of sector)
    var winningLat=maxLat-(rightLat*latStep)-(latStep/2);
    var winningLng=minLng+(rightLng*lngStep)+(lngStep/2);
    var newCenter=new google.maps.LatLng(winningLat,winningLng);
    map.setCenter(newCenter);
    showTable=true; //--------------this will display the table of data so you can see how many markers are in each sector
    if(showTable){
        var table='<table>';
        for(row=0;row<s;row++){
            table+='<tr>';
            for(td=0;td<s;td++){
                table+='<td>'+gridCount[row][td]+'</td>';
            }
            table+='</tr>';
        }
        table+='</table>';
        document.getElementById('tabular').innerHTML=table;
    }
</script>
</div>
</body>
</html>
1 голос
/ 14 декабря 2011

Вот идея. Обратитесь к этому SO Вопрос . Первый ответ содержит ссылку на XML-файл с координатами многоугольника для всех государственных границ. Вы также можете упростить полигоны, чтобы их было не так много.

Когда маркер добавляется на карту, вы можете проверить, существует ли он в одном из 50 точечных массивов, используя алгоритм, подобный this :

ОБНОВЛЕНИЕ: исходная функция, которую я разместил, не была в javascript. Вот один Javascript и скрипка его работы : 

/*
* state == array of Google LatLng objects.
* lat == latitude to test
* lng == longitude to test
*/
function pointInPolygon(state, lat, lng) {
    var polyCount = state.length;
    var oddNodes = false;
    var j = 0;
    for (var i = 0; i < polyCount; i++) {
        j++;
        if (j == polyCount) {
            j = 0;
        }
        latitudeBoundry = state[i].lat();
        longitudeBoundry = state[i].lng();
        latitudeBoundry2 = state[j].lat();
        longitudeBoundry2 = state[j].lng();
        if ((latitudeBoundry > lat && latitudeBoundry <= lat 
             || latitudeBoundry2 > lat && latitudeBoundry <= lat)) {
            if (longitudeBoundry + (lat - latitudeBoundry)
                / (latitudeBoundry2 - latitudeBoundry) 
                * (longitudeBoundry2 - longitudeBoundry) > lng) {
                oddNodes = !oddNodes
            }
        }
    }
    return oddNodes;
}

Если он существует, увеличить счетчик.

Как только вы нашли состояние с наибольшим количеством маркеров, вы можете установить масштаб, создав объект bounds. 

//the polyArray is the array of points for the target state.
var bounds = new google.maps.LatLngBounds();
for ( var i = 0; i < polyArray.length; i++ )
{
  bounds.extend( polyArray[ i ] );
}

//set the map viewport
map.fitBounds(bounds)

Я понятия не имею, как это повлияет на производительность, но это должно быть намного быстрее, чем обратное геокодирование.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...