0

ページ（phpから動的に生成される）から緯度と経度の座標を取得して、Googleマップに配置しようとしています。これを行うための最良の方法はわかりませんが、それらを配列に配置し、クリックして再描画することが最良の方法のようです（はい？）

こちらのサイトを参照してください：http：//yournextwebsite.se/riokultur/projekt

仕組みの一般的な前提は次のとおりです。ユーザーがチェックボックスを選択すると、プロジェクト（地図の下に表示）がカテゴリに基づいてフィルタリングされます。地図には、ページが読み込まれたときにすべての場所が表示される必要があります（緯度に基づく）。および長い座標）、ユーザーがフィルターをクリックしたときに表示/非表示にします。「アクティブ」クラスは、ユーザーのパラメーターに適合する各プロジェクトに追加されます。それらのアクティブなプロジェクトを返却して、マップに表示する必要があります。

これが私がこれまでに持っているコードです（地図を描画しますが、すべてのマーカーがないか、クリックで再描画します...ほとんどのコードはGoogleマップサイト自体から取得されます）

jQuery(document).ready(function($){
function initialize() {
    var myLatlng = new google.maps.LatLng(57.68066002977235, 11.9091796875);
    var mapOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

    var contentString = '<div id="content">Content</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Uluru (Ayers Rock)'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }

function redraw(lat, long) {
    //add a new location for each lat/long pair
    var newLatLong = new google.maps.LatLng(lat, long);

    var mapOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

    var contentString = '';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: newLatlng,
        map: map,
        title: ''
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }

  initialize();

//start latitudes array
var latitudes = [];
//start longitudes array
var longitudes = [];


$('form div input').click(function(){
    //loop through active elements when a checkbox is selected/deselected
    $('p.active.filter-result').each(function(){

        //finds the active elements latitude
        var latitude = $(this).children('.latitude').text();

        //finds the active elements longitude
        var longitude = $(this).children('.longitude').text();

        //if the latitude is set, add it to the array
        if (latitude) latitudes.push(latitude);

        //if the longitude is set add it to the array
        if (longitude) longitudes.push(longitude);

    });

    //redraw the map...
    for(i=0; i<latitudes.length; i++) {
        redraw(latitude, longitude);
    }
});
});
4

2 に答える 2

0

修繕：

jQuery(document).ready(function($){
var initialize = function() {

    //an array of arrays, with location info
var locations = [];

    //only do this for the active results
$('p.active.filter-result').each(function(n){
    var title = $(this).children('a').text();
    var link = $(this).children('a').attr('href');
    var latitude = $(this).children('.latitude').text();
    var longitude = $(this).children('.longitude').text();

        //must have a latitude and longitude to be added to the array
    if(latitude && longitude) {

            //build the title link for the tool tip
            var titleLink = '<h3><a href="' + link + '"/>' + title + '</a></h3>';

            //save the new location info
            var newLocation = [titleLink, latitude, longitude, n];

            //push it to the locations array
            locations.push(newLocation);
     }
});

var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 10,
  center: new google.maps.LatLng(57.7068353, 11.9691625),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
}

initialize();

    //recheck for active classes on each form click
$('form div input').click(function(){
    initialize();
});

 });
于 2013-02-27T18:44:47.277 に答える
0

これを試して...

jQuery(document).ready(function($){

    var existingMarkers = []; // to save existing markers on screen
    var popupWindow = [];
    //start latitudes array
    var latitudes = [];
    //start longitudes array
    var longitudes = [];

    function initialize() {
        var lat = 57.68066002977235;
        var lon = 11.9091796875;
        var myLatlng = new google.maps.LatLng(lat, lon);
        var mapOptions = {
          zoom: 8,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

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

        var contentString = '<div id="content">Content</div>';
        var markerTitle = 'Uluru (Ayers Rock)';

        redraw(lat, lon, contentString, markerTitle);

      }

    function redraw(lat, long, popupContent, mTitle) {
        //add a new location for each lat/long pair
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, long);,
            map: document.getElementById('map_canvas'),
            title: mTitle
        });
        AttachPopupToMarker(marker, popupContent);
        existingMarkers.push(marker);
    }

    function AttachPopupToMarker(marker, popupContent){
        google.maps.event.addListener(marker, 'click', function() {
            var infowindow = new google.maps.InfoWindow({
                content: popupContent
            });
            ClearMap(popupWindow);
            infowindow.open(map,marker);
            popupWindow.push(infowindow);
        });
    }

    function ClearMap(mapObjects){
        while(mapObjects[0]){
            mapObjects.pop().setMap(null);
        }
    }

    initialize();    

    $('form div input').click(function(){
        //loop through active elements when a checkbox is selected/deselected
        $('p.active.filter-result').each(function(){

            //clear latitudes array
            latitudes = [];
            //clear longitudes array
            longitudes = [];
            //finds the active elements latitude
            var latitude = $(this).children('.latitude').text();

            //finds the active elements longitude
            var longitude = $(this).children('.longitude').text();

            //if the latitude is set, add it to the array
            if (latitude) latitudes.push(latitude);

            //if the longitude is set add it to the array
            if (longitude) longitudes.push(longitude);

        });

        //clear previous marker
        ClearMap(existingMarkers);

        //redraw the map...
        for(i=0; i<latitudes.length; i++) {
            redraw(latitude, longitude, '', '');
        }
    });
});
于 2013-02-27T06:49:56.393 に答える