Question

我在codeigniter中创建的网站上有一张谷歌地图。现在我想用我的sql数据库中的数据移动标记。我的数据库中的数据将会更新。我可以通过biostall在地图上绘制标记。现在我想移动它们。

所以我加载所有标记并将它们传递给我的视图以使用ajax / javascript脚本绘制它们。我没有错误但也没有标记..我不是ajax和javascript的专家，所以问题需要在那里，但我无法解决它..这是我的代码。地图应每3秒更新一次。

我的控制器：

function render_maps() {
    $userid = $this->uri->segment(3);
    $userlevel = $this->user_model->get_user_level($userid);
    if ($userlevel > 2) {
        $this->load->library('googlemaps');
        $this->googlemaps->initialize();

        #$this->marks();

        $config['zoom'] = 'auto';
        $data['map'] = $this->googlemaps->create_map();
        $data['markers'] = json_encode($this->user_model->get_marks());
        $data['userdata'] = $this->session->userdata;
        $this->load->view('header', $data);
        $this->load->view('dashboard_maps', $data);
        $this->load->view('wrapper', $data);
    }
}

我的观点：

<head>
     <?php echo $map['js']; ?>
     <script type="text/javascript">
    function refreshMarkers() {
         $.ajax({
              url: "<?php site_url('User/render_maps/'. $this->session->userdata('user_id')) ?>",
              type: "POST",
              data: ({value: $markers}),
              dataType: "json", //retrieved Markers Lat/lng in Json, thus using this dataType
              success: function(data){
                  //Removing already Added Markers//////////
                 for (var i = 0; i < $markers.length; i++) {
                     $markers[i].setMap(null);
                 }
                 $markers = new Array();
                 //////////////////////////////////////////
                  // Adding New Markers////////////////////

                  for (var i = 0, len = data.length; i < len; ++i) { // Iterating the Json Array
                var d = data[i];

                var lat = parseFloat(d.lat);
                var lng = parseFloat(d.lng);
                var myLatlng = new google.maps.LatLng(lat, lng);

                var marker = {
                    map: map,
                    position: myLatlng // These are the minimal Options, you can add others too
                };
                createMarker(marker);
            }
        }
    }
    );
</script>

Answer 1

您的功能refreshMarkers()缺少结束}括号。还请包括所有依赖项，例如jquery和其他函数。

你不必成为ajax或javascript的专家来实现这一目标。确保使用浏览器控制台成功检索数据。

这是Google Map JS API的一个简单示例，其中包含多个显示不同地震位置的标记。尝试运行下面的代码段。

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>	  
        <style type="text/css">
            html, body { height: 100%; margin: 0; padding: 0; }
            #map { height: 100%; }
        </style>
    </head>
    <body>
        Click Here >> <button id="earthquakes">Show Earthquakes</button>
        <div id="map"></div>
        <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrhmCE5YeH0r9Kkeq-v4ZXBd87UvwCOrw&callback=initMap">
        </script>
        <script>
            var map;
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: 4.8259171, lng: 63.3691405},
                    zoom: 1
                });
            }

            function createMarker(latlng, name) {
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: name
                });  
            }

            function displayMarkers() {    
                console.log('displayMarkers:'+latitd+':'+longtd+'\n');
                var latlng = new google.maps.LatLng(latitd, longtd);
                var name = titleName;
                createMarker(latlng, name);    
            }  

            var latitd;
            var longtd;
            var titleName; 

            var nowDate = new Date();
            var displayDate = nowDate.toJSON().slice(0,10);
            nowDate.setDate(nowDate.getDate() - 1);
            var yesterDate = nowDate.toJSON().slice(0,10);

            $(document).ready(function() {
                $('#earthquakes').click(function() {    
                    getQuakes();
                });

                function getQuakes() {
                    console.log('yesterDate:'+yesterDate+', displayDate:'+displayDate+'\n');
                    $.ajax({
                        url: 'http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=' + yesterDate + '&endtime=' + displayDate,
                        dataType : 'json'
                    })
                        .done(function(data) {
                        console.log('data.features:'+data.features);
                        $.each(data.features, function(key, val) {
                            var coord = val.geometry.coordinates;
                            locationD = {
                                latd: coord[0],
                                lngd: coord[1]
                            };
                            latitd = locationD.latd;
                            longtd = locationD.lngd;
                            titleName = val.properties.title;

                            console.log(latitd, longtd);
                            console.log(titleName); 

                            displayMarkers();        
                        });
                    })
                        .fail(function(e){
                        console.log(e);
                    })
                        .always(function(){
                        console.log('ajax executed');
                    });
                }    
            });		
        </script>
    </body>
</html>

＆＃13;

使用codeigniter，Ajax，Javascript，Php从谷歌地图更新标记

1 个答案: