【问题标题】:How i show multiple location in google map (Codeigniter)我如何在谷歌地图中显示多个位置(Codeigniter)
【发布时间】:2018-01-25 07:36:04
【问题描述】:

我如何在 Codeigniter 的谷歌地图中显示多个位置。我有一个数组,包括纬度和经度。我想在地图中显示所有位置。

这是我的 $query 数组从控制器传递到视图页面,

Array ( 
        [0] => stdClass Object ([lat] => 37.45360256419911 [lng] => -122.16470718383789) 
        [1] => stdClass Object ([lat] => 37.45455646705577 [lng] => -122.1653938293457) 
        [2] => stdClass Object ([lat] => 37.451543303913226 [lng] => -122.16745376586914) 
      )   

我想在我的地图上显示所有这 3 个位置,现在它只标记 1 个位置。

<script>
    var map;
    var marker;
    var infowindow;
    var messagewindow;

    function initMap() {

    <?php
        foreach($query as $row){
            $lat=$row->lat;
            $lng=$row->lng;
    ?>

        var location = {lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?>};
        map = new google.maps.Map(document.getElementById('map'), {
            center: location,
            zoom: 13
        });

        var marker = new google.maps.Marker({
            position: location,
            map: map,
        });


        infowindow = new google.maps.InfoWindow({
            content: document.getElementById('form')
        });

        messagewindow = new google.maps.InfoWindow({
            content: document.getElementById('message')
        });

        google.maps.event.addListener(map, 'click', function(event) {
            marker = new google.maps.Marker({
            position: event.latLng,
            map: map
        });


        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });
    });

<?php
    }
?>
    }

【问题讨论】:

  • 您可以使用此解决方案解决您的问题https://stackoverflow.com/questions/46093485/how-to-add-multiple-markers-in-google-map/46093758#46093758
  • 请提供一个minimal reproducible example 来证明您的问题。发布的代码只有一个位置 (var location)。
  • @geocodezip 在我的 $query 数组中,我在上面显示的不止一行。我想在我的 map.for 中显示所有位置,因为我使用了 foreach 循环。我放在foreach循环中的var lacation。在我尝试执行循环的代码中,我将获取数组中的所有值并标记每个位置。但它只标记一行
  • 第二个请求。请提供一个 minimal reproducible example 来证明您的问题(最好是 StackOverflow 代码 sn-p)。我们无法判断您的 PHP 在做什么,我们没有您的数据库。

标签: php codeigniter google-maps


【解决方案1】:
It works fine for me...    
In controller : 

        function latLanLocation()
            {
               if($this->session->userdata('logged_in'))
               {
                    $session_data = $this->session->userdata('logged_in');
                    $data['title'] = 'Create client';

                    $ibo = $this->session->userdata['logged_in']['ibo'];

                    $latLanQuery = $this->db->query('select name,latitude,longitude from distributor_clients where sponsor='.$ibo.' AND status="A" AND latitude !=0 AND longitude !=0');

                    $userData = $latLanQuery->result_array();

                    $locations='[';
                    foreach ($userData as $key => $row) {
                        $name = $row['name'];
                        $longitude = $row['longitude'];                              
                        $latitude = $row['latitude'];

                        $locations .= '["'.$name.'","'.$latitude.'","'.$longitude.'"],';
                    }
                    $locations .= ']';

                    $data['markers'] =  $locations;

                    $this->load->view('location', $data);
               }
               else
               {
                 redirect('login', 'refresh');
               }
            }

    //In View folder create location.php
    // Html code for Google Map Javascript API
        <!DOCTYPE html>
        <html>
            <head>
                <style>
                    #mapCanvas {
                    height: 400px;
                    width: 100%;
                    }
                </style>
            </head>
            <body>
                <div id="mapCanvas"></div>
                <script>
                    function initMap() {
                        var map;
                        var bounds = new google.maps.LatLngBounds();
                        var mapOptions = {
                            mapTypeId: 'roadmap'
                        };

                        map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
                        map.setTilt(50);

                        var markers = <?php echo $markers; ?>

                        // Add multiple markers to map
                        var infoWindow = new google.maps.InfoWindow(), marker, i;

                        // Place each marker on the map  
                        for( i = 0; i < markers.length; i++ ) {
                            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                            bounds.extend(position);
                            marker = new google.maps.Marker({
                                position: position,
                                map: map,
                                title: markers[i][0]
                            });                                           


                            // Center the map to fit all markers on the screen
                            map.fitBounds(bounds);
                        }

                        // Set zoom level
                        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                            this.setZoom(14);
                            google.maps.event.removeListener(boundsListener);
                        });

                    }
                    // Load initialize function
                    google.maps.event.addDomListener(window, 'load', initMap);
                </script>
                <script async defer
                    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
            </body>
        </html>

最终输出:

【讨论】:

    【解决方案2】:

    未测试,但您可以这样尝试。将 php 代码放在前面并生成一个 lat,lng 坐标数组,将其转换为 json 供initmap 函数使用。遍历对象成员并添加一个新标记。

    <?php
        $data=array();
    
        foreach($query as $row){
            $lat=$row->lat;
            $lng=$row->lng;
            $data[]=array('lat'=>$lat,'lng'=>$lng);
        }
        $json=json_encode( $data );
    ?>
    
    <script>
    
        var map;
        var marker;
        var infowindow;
        var messagewindow;
    
        <?php
            echo "
            var json={$json};
            var lat={$lat}; 
            var lng={$lng};
            "
        ?>
    
        function initMap() {
    
            map = new google.maps.Map(document.getElementById('map'), {
                center: location,
                zoom: 13
            });
    
            infowindow = new google.maps.InfoWindow({
                content: document.getElementById('form')
            });
    
            messagewindow = new google.maps.InfoWindow({
                content: document.getElementById('message')
            });
    
            google.maps.event.addListener( map, 'click', function(event) {
                marker = new google.maps.Marker({
                    position: event.latLng,
                    map: map
                });
            });         
    
    
            for( var n in json ){
                var obj=json[ n ];
                lat=obj.lat;
                lng=obj.lng;
                var location = { lat:lat, lng:lng };
    
                var marker = new google.maps.Marker({
                    position: location,
                    map: map,
                }); 
    
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });             
            }
        }
    </script>
    

    使用您在评论中提供的密钥,我收到关于无效密钥的错误,并且地图根本拒绝加载。但是,使用不同的键可以很好地进行一些更改。

    我的数据库连接是mysqli,记录集的查询和处理可能与您选择的方法相同,也可能不同。您需要根据自己的需要进行编辑,因为问题中省略了这些细节。

    <?php
        /* emulated db connection */
        include __DIR__. '/db.php';
    
        /* get markers from a table */
        $sql='select `name`,`lat`,`lng` from markers limit 20';
        $result=$db->query( $sql );
    
    ?>
    <!--
    
        Original question:
        https://stackoverflow.com/questions/48437784/how-i-show-multiple-location-in-google-map-codeigniter/48438084?noredirect=1#comment83871602_48438084
    
    -->
    <?php
    
        /* generate data array & convert to json */
        $data=array();
        /*
        foreach( $query as $row ){
    
        }
        */
        while( $row=$result->fetch_object() ){
            $lat=$row->lat;
            $lng=$row->lng;
            $name=$row->name;
            $data[]=array('name'=>$name,'lat'=>$lat,'lng'=>$lng);       
        }
    
        $json=json_encode( $data );
    ?>
    <!doctype html>
    <html>
        <head>
            <meta charset='utf-8' />
            <title>Google maps - display markers</title>
            <script>
    
                var map;
                var marker;
                var infowindow;
                var messagewindow;
    
    
    
                <?php
                    echo "
                    var json={$json};
                    var lat={$lat}; 
                    var lng={$lng};
                    "
                ?>
    
                function initMap() {
                    var location=new google.maps.LatLng( lat,lng );
                    map = new google.maps.Map( document.getElementById('map'), {
                        center: location,
                        zoom: 13
                    });
    
                    infowindow = new google.maps.InfoWindow({
                        content: document.getElementById('form')
                    });
    
                    messagewindow = new google.maps.InfoWindow({
                        content: document.getElementById('message')
                    });
    
                    google.maps.event.addListener( map, 'click', function(event) {
                        marker = new google.maps.Marker({
                            position: event.latLng,
                            map: map
                        });
                    });         
    
    
                    for( var n in json ){
    
                        var obj=json[ n ];
                        lat=obj.lat;
                        lng=obj.lng;
                        name=obj.name;
    
                        var location = new google.maps.LatLng( lat, lng );
    
                        var marker = new google.maps.Marker({
                            position: location,
                            title:name,
                            map: map,
                        }); 
    
                        google.maps.event.addListener( marker, 'click', function() {
                            var content=infowindow.getContent();                            
                            content.querySelector('input[name="lat"]').value=e.latLng.lat();                            
                            content.querySelector('input[name="lng"]').value=e.latLng.lng();                            
                            content.querySelector('input[name="name"]').value=this.title;
    
                            infowindow.open( map, this );
                        }.bind( marker )); /* bind to THIS marker */
    
                    }
                }
            </script>
            <script async defer src='//maps.googleapis.com/maps/api/js?key=<API KEY>&callback=initMap'></script>
            <style>
                #map{
                    width:800px;
                    height:600px;
                    float:none;
                    margin:auto;
                }
            </style>
        </head>
        <body>
            <div id='map'></div>
            <form id='form'>
                <input type='text' name='lat' />
                <input type='text' name='lng' />
                <input type='submit' />
            </form>
            <div id='message'>unknown content</div>
        </body>
    </html>
    

    【讨论】:

    • 当我这样放时,没有显示任何标记。我在检查 js?key=AIzaSyDz2oQPQR0EU45S6mBl7jry4e_PdmYM&callback=initMap:41 InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number 的网络选项卡中遇到错误
    • 你没有共享你的 api 密钥
    • 我同意,但我不同意,但无论如何这些都是可公开访问的,所以在这种情况下,不会造成任何伤害,因为@OP 提供的 api 密钥无论如何都是无效的
    • @betofarina 我知道,我已经对我的 api 密钥进行了一些更改。
    • @RamRaider 对不起,我忘了告诉你。它的工作 api 我做了一些改变,因为你知道原因,对不起。
    【解决方案3】:

    此代码可以显示多个不同的标记。希望对您有所帮助。

    <!DOCTYPE html>
    <html>
      <head>
        <title>Custom Markers</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
    
            /* Always set the map height explicitly to define the size of the div
            * element that contains the map. */
            #map {
                height: 100%;
            }
    
            /* Optional: Makes the sample page fill the window. */
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
    
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script>
            var map;
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {             
                    zoom: 16,
                    center: new google.maps.LatLng(-33.91722, 151.23064),
                    mapTypeId: 'roadmap'
                });
    
                var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
                var icons = {
                    library: {
                        icon: iconBase + 'library_maps.png'
                    },
                    info: {
                        icon: iconBase + 'info-i_maps.png'
                    }
                };
    
                var features = [
    
                    // do looping here and replace LatLng value using foreach PHP.
    
                    {
                        position: new google.maps.LatLng(-33.91721, 151.22630),
                        type: 'info'
                    }, {
                        position: new google.maps.LatLng(-33.91539, 151.22820),
                        type: 'library'
                    }, 
    
                ];
    
                // Create markers.
                features.forEach(function(feature) {
                    var marker = new google.maps.Marker({
                        position: feature.position,
                        icon: icons[feature.type].icon,
                        map: map
                    });
                });
            }
        </script>
        <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>
    

    来源:https://developers.google.com/maps/documentation/javascript/custom-markers

    【讨论】:

    • @Muhammad Rauuf 非常感谢......我明白了。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-03-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多