使用Google Map的地理定位标记多个位置

时间:2018-03-02 13:01:02

标签: javascript php google-maps google-maps-api-3 maps

我有一个地图设置,以及一组类型为'locs'的HTML元素。我想迭代这些,并用标记在Google地图上标记它们。但是,任何标记多个的尝试都会失败。任何帮助或指导?这是我目前的代码:

编辑:以下是控制台日志:

test.php:68 Uncaught ReferenceError: google is not defined
at test.php:68
jquery.min.js:2 Uncaught TypeError: Cannot read property 'geocode' of 
undefined
    at codeAddress (test.php:36)
    at HTMLOptionElement.<anonymous> (test.php:52)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at HTMLDocument.<anonymous> (test.php:50)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)
js?key=KEY_HERE&callback=initMap:100 
Uncaught Lb

编辑#2:以下是完整代码:

    <?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$events = json_decode(file_get_contents('https://data.melbourne.vic.gov.au/resource/5vsv-f73x.json?$$app_token=KEY_HERE'), true);
$counter = 0;

$seats = json_decode(file_get_contents('https://data.melbourne.vic.gov.au/resource/w4fc-iq27.json?$$app_token=KEY_HERE'), true);


?>

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var geocoder;
        var map;
        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
                zoom: 15,
                center: latlng
            }
            map = new google.maps.Map(document.getElementById('map'), mapOptions);
        }

        function codeAddress(big) {
            var address = big + ", Melbourne";

            geocoder.geocode({'address': address}, function (results, status) {
                if (status == 'OK') {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });

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


            $('.locs').each(function () {
                alert($(this).text());
                codeAddress($(this).text());
            });
        });




        var arse;
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };


                arse = new google.maps.Marker({
                    position: new google.maps.LatLng(pos['lat'], pos['lng']),
                    map: map,
                    icon: 'https://rnr30-compgroup.netdna-ssl.com/wp-content/themes/rnr3/img/distance_marker.png'
                });

                map.setCenter(pos);
                map.setZoom(12);

                var cityCircle = new google.maps.Circle({
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    center: pos,
                    radius: 10000
                });

            }, function() {
            });
        } else {
            // Browser doesn't support Geolocation
        }
    </script>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body onload="initialize()">
<div id="map" style="width: 320px; height: 480px;"></div>

<?php
echo "<select id='loc' onchange='codeAddress()'>";
foreach($events as $event)
{
    //print_r($event);
    echo "<option class='locs' value='loc".$counter."'>".$event['location']."</div> <br>";
    $counter++;
}
echo "</select>";
?>
</body>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=KEY_HERE&callback=initMap">
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

原始代码中存在相当多的问题阻止它工作 - 当它发生时我认为它会很快超过每日查询限制。但是,我在这里稍微修改了代码的流程,目前迭代遍历每个位置的例程在第一个地址之后终止(这是故意进行测试)

我将这段代码放在navigator.geolocation回调中,尽管可以在initialize函数中轻松完成。

顺便说一句 - 在那个循环中使用alert语句是****中的皇家痛苦 - 花了很长时间才能完成整个批次! ;(

目前,这成功地对第一个地址进行了地理编码并添加了一个标记 - 但正如我所说,代码在第一次进入后故意终止。

<?php
    ini_set('display_errors', 1);
    ini_set('display_startup_errors', 1);
    error_reporting(E_ALL);

    $counter = 0;
    $events = json_decode( file_get_contents( 'http://data.melbourne.vic.gov.au/resource/5vsv-f73x.json?$$app_token=RI7KnTt7JLb6dtsY4jiCET3Qq' ), true);
    $seats = json_decode( file_get_contents( 'http://data.melbourne.vic.gov.au/resource/w4fc-iq27.json?$$app_token=RI7KnTt7JLb6dtsY4jiCET3Qq' ), true );


?>

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var geocoder;
        var map;


        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
                zoom: 15,
                center: latlng
            }
            map = new google.maps.Map(document.getElementById('map'), mapOptions);



            var mkr;
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };


                    mkr = new google.maps.Marker({
                        position: new google.maps.LatLng(pos['lat'], pos['lng']),
                        map: map,
                        icon: 'https://rnr30-compgroup.netdna-ssl.com/wp-content/themes/rnr3/img/distance_marker.png'
                    });

                    map.setCenter(pos);
                    map.setZoom(12);

                    var cityCircle = new google.maps.Circle({
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: '#FF0000',
                        fillOpacity: 0.35,
                        map: map,
                        center: pos,
                        radius: 10000
                    });



                    console.clear();
                    $('.locs').each(function() {
                        codeAddress( $(this).text() );
                        console.info( $(this).text() );
                        return false;/* remove this `return false;` statement to proceed with ALL requests ... warning!*/
                    });

                }, function( err ) {
                    console.warn( err )
                });
            } else {
                // Browser doesn't support Geolocation
            }
        }

        function codeAddress(big) {
            var address = big + ", Melbourne";

            geocoder.geocode({'address': address}, function (results, status) {
                if (status == 'OK') {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    console.log('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

    </script>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body onload="initialize()">
    <div id="map" style="width: 320px; height: 480px;"></div>

    <?php
        echo "<select id='loc' onchange='codeAddress(this.options[ this.options.selectedIndex ].text)'>";
        foreach( $events as $event ){
            echo "<option class='locs' value='loc".$counter."'>".$event['location']."</div> <br>";
            $counter++;
        }
        echo "</select>";
    ?>

    <script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCaZxKJmzB3sbIE72rQ_No-xQVP5YwOxjU&callback=initialize"></script>
</body>
</html>