0

我正在尝试从页面中提取纬度和经度坐标（从 php 动态生成）并将它们放在谷歌地图上。我不确定最好的方法，但似乎将它们放在一个数组中并单击重绘是最好的方法（是吗？）

在这里查看网站：http: //yournextwebsite.se/riokultur/projekt

这是其工作原理的一般前提：用户选择复选框，然后项目（在地图下方列出）根据他们所在的类别进行过滤。地图还必须在页面加载时显示所有位置（基于 lat和长坐标）并在用户单击过滤器时显示/隐藏它们。一个“活动”类被添加到适合用户参数的每个项目中。我需要归还那些活跃的项目，并在地图上显示它们。

这是我到目前为止的代码（它绘制地图，但没有所有标记，或者单击重绘......大部分代码都是从谷歌地图网站本身​​提取的）

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 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 回答
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 回答