LatLng Bounds для отображения пользовательских маркеров - PullRequest
0 голосов
/ 18 августа 2011

Я использую приведенный ниже код для отображения маркеров в заданном месте из базы данных MySQL. Я пытаюсь установить границы LatLng, чтобы я мог видеть все маркеры для каждого заданного местоположения, но это не работает, то есть карта не показывает все маркеры в видимой карте, и я также получаю сообщение об ошибке, что 'findid не определено ". Будучи немного новичком в этом, я не уверен, что это неправильный код или расположение этого фрагмента кода.

Мне просто интересно, будет ли вообще возможно, если бы кто-то мог взглянуть на это и сообщить мне, где я иду не так.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>All Locations</title>
        <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript"> 
            var customIcons = {
            Artefact: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            Coin: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            Jewellery: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

            function load() { 
            var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:14, 
            mapTypeId: 'satellite' 
            }); 

            // Change this depending on the name of your PHP file 
            downloadUrl("phpfile.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker"); 
            for (var i = 0; i < markers.length; i++) { 
            var findid = markers[i].getAttribute("findid");
            var locationid = markers[i].getAttribute("locationid"); 
            var dateoftrip = markers[i].getAttribute("dateoftrip");
            var findcategory = markers[i].getAttribute("findcategory");
            var findname = markers[i].getAttribute("findname");
            var finddescription = markers[i].getAttribute("finddescription");
            var detectorname = markers[i].getAttribute("detectorname");
            var searchheadname = markers[i].getAttribute("searchheadname");
            var detectorsettings = markers[i].getAttribute("detectorsettings");
            var pasref = markers[i].getAttribute("pasref");
            var findimage= markers[i].getAttribute("findimage");
            var additionalcomments= markers[i].getAttribute("additionalcomments");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("findosgb36lat")), 
            parseFloat(markers[i].getAttribute("findosgb36lon")));
            var icon = customIcons[findcategory] || {}; 
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            title: 'Click to view details',
            icon: icon.icon,
            shadow: icon.shadow
            }); 

            } 
            }); 
            } 

            // Creating a LatLngBounds object
            var bounds = new google.maps.LatLngBounds();
            // Looping through the places array
            for (var i = 0; i < findid.length; i += 1) {
            // Extending the bounds object with each LatLng
            bounds.extend(findid[i]);
            }
            // Adjusting the map to new bounding box
            map.fitBounds(bounds)

            function downloadUrl(url, callback) { 
            var request = window.ActiveXObject ? 
            new ActiveXObject('Microsoft.XMLHTTP') : 
            new XMLHttpRequest; 

            request.onreadystatechange = function() { 
            if (request.readyState == 4) { 
            request.onreadystatechange = doNothing; 
            callback(request, request.status); 
            } 
            }; 

            request.open('GET', url, true); 
            request.send(null); 
            } 

            function doNothing() {} 

            </script> 
            </head> 

            <body onLoad="load()">
                <div id="map"></div>
            </body> 
            </html>

ОБНОВЛЕННЫЙ КОД

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>All Locations</title>
        <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript"> 
            var customIcons = {
            Artefact: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            Coin: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            Jewellery: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

            var markers;

            function load() { 
            var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:14, 
            mapTypeId: 'satellite' 
            }); 

            // Change this depending on the name of your PHP file 
            downloadUrl("phpfile.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker"); 
            for (var i = 0; i < markers.length; i++) { 
            var findid = markers[i].getAttribute("findid");
            var locationid = markers[i].getAttribute("locationid"); 
            var dateoftrip = markers[i].getAttribute("dateoftrip");
            var findcategory = markers[i].getAttribute("findcategory");
            var findname = markers[i].getAttribute("findname");
            var finddescription = markers[i].getAttribute("finddescription");
            var detectorname = markers[i].getAttribute("detectorname");
            var searchheadname = markers[i].getAttribute("searchheadname");
            var detectorsettings = markers[i].getAttribute("detectorsettings");
            var pasref = markers[i].getAttribute("pasref");
            var findimage= markers[i].getAttribute("findimage");
            var additionalcomments= markers[i].getAttribute("additionalcomments");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("findosgb36lat")), 
            parseFloat(markers[i].getAttribute("findosgb36lon")));
            var icon = customIcons[findcategory] || {}; 
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            title: 'Click to view details',
            icon: icon.icon,
            shadow: icon.shadow
            }); 
            } 
            }); 
               // Creating a LatLngBounds object
            var bounds = new google.maps.LatLngBounds();
            // Looping through the places array
            for (var i = 0; i < markers.length; i += 1) {
            // Extending the bounds object with each LatLng
            bounds.extend(markers[i]);
            }
            // Adjusting the map to new bounding box
            map.fitBounds(bounds)   
            } 
            function downloadUrl(url, callback) { 
            var request = window.ActiveXObject ? 
            new ActiveXObject('Microsoft.XMLHTTP') : 
            new XMLHttpRequest; 

            request.onreadystatechange = function() { 
            if (request.readyState == 4) { 
            request.onreadystatechange = doNothing; 
            callback(request, request.status); 
            } 
            }; 

            request.open('GET', url, true); 
            request.send(null); 
            } 

            function doNothing() {} 

            </script> 
            </head> 

            <body onLoad="load()">
                <div id="map"></div>
            </body> 
            </html>

1 Ответ

1 голос
/ 19 августа 2011

Вы пытаетесь перебрать массив findid, когда он не существует.Есть 2 причины, по которым его не существует:

  1. Он не объявлен в области, в которой вы пытаетесь перебрать его
  2. Даже если бы он был, он бы нене может быть определено до после запроса ajax, который вы используете для получения данных XML, завершен

«A» в Ajax означает «асинхронный», что означаетчто, когда вы запрашиваете что-то, ваш код немедленно продолжается и не ждет, пока сервер ответит на запрос.

Что касается первого пункта, функция, которую вы передаете downloadUrl, проходит по * 1015.* элементы в XML и извлекает много данных в локальные переменные, но на самом деле он ничего не делает с большинством из них.А поскольку они локальные, они не существуют после завершения функции.Фактически, они просто перезаписываются для каждого элемента <marker>, но это все.

Итак, вместо того, чтобы пытаться перебрать findid вне функции (там, где ее нет), поместите кодиз цикла в функцию, так что он может фактически получить доступ к созданному там маркеру.

Редактировать

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

function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
        center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
        zoom:14, 
        mapTypeId: 'satellite' 
    });

    var bounds  = new google.maps.LatLngBounds();
    var markers = [];

    downloadUrl("phpfile.php", function(data) { 
        var xml = data.responseXML; 
        var markers = xml.documentElement.getElementsByTagName("marker");
        // loop through the markers in the xml file
        for (var i = 0; i < markers.length; i++) { 
            var point = new google.maps.LatLng( 
                parseFloat(markers[i].getAttribute("findosgb36lat")), 
                parseFloat(markers[i].getAttribute("findosgb36lon"))
            );
            var icon = customIcons[findcategory] || {}; 
            var marker = new google.maps.Marker({          
                map: map, 
                position: point,
                title: 'Click to view details',
                icon: icon.icon,
                shadow: icon.shadow
            });
            // LatLngBounds expects a LatLng object - not a marker object
            bounds.extend(point);
        }
        // fit the map after all the points and markers have been created - i.e. after the loop
        map.fitBounds(bounds);
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...