Примечание: ошибка преобразования массива в строку при преобразовании массива из php в javascript

0

Я пытаюсь получить массив широт и долгот от массивов php $ lat и $ long, которые извлекаются базой данных.

<?php

...

$lat[$latlongindex] = $results_row['latitude'];
$long[$latlongindex] = $results_row['longitude'];



echo "
<script type=\"text/javascript\">

        var locations = $latlongindex;
        var jslat = <?php echo json_encode($lat); ?>;
        var jslong = <?php echo json_encode($long); ?>; // <----------Line 58

        var map = new GMaps({
            div: '#map',
            lat: 39.833,
            lng: -98.583,
            width: '900px',
            height: '500px',
            zoom: 4,
            zoomControl : true,
            zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
            },
            panControl : false,
        });
//------------------------------------------------ADD MARKERS--------------

        for (var i = 0; i<locations; i++) {
            map.addMarker({
            position: new google.maps.LatLng( jslat[i], jslong[i] ),

            });
        }

</script>
"; // <--------------------------------Line 83

}

}
?>

Как быстрая проверка, я могу выполнить echo json_encode ($ lat) и json_encode ($ long), и они отображаются корректно, но когда я пытаюсь использовать их внутри javascript, я получаю сообщение "Notice: Array to string conversion" в строках 58 и 83. Если Я прямо указываю местоположение:

        var jslat = [];
        jslat[0] = $lat[0];

Он будет работать правильно, но, очевидно, просто показывает первый маркер. Таким образом, я знаю, что могу получить доступ к элементам массивов $ lat и $ long. Я чувствую, что это упрощенная ошибка, но, похоже, не может найти что-либо в стеке, что является аналогичной проблемой.

Любая помощь будет большой. Благодарю.

  • 0
    stackoverflow.com/questions/11722059/...
  • 1
    «Вам нравится php, поэтому вы помещаете php в свой php»))
Показать ещё 1 комментарий
Теги:
arrays
google-maps

1 ответ

0
// MAP CODE
        $qry_country_map = 'Select name, refugee, lat, lng FROM '.$table_name.' WHERE 1 AND status = 1';
        $country_data_map = $wpdb->get_results($qry_country_map , ARRAY_A);
        //echo "<pre>";print_r($country_data_map);exit;
        $array_string = "["; 
        for($m=0;$m<count($country_data_map);$m++) { 
         $array_string .= "['".$country_data_map[$m]['name']."', '".$country_data_map[$m]['name']."','".$country_data_map[$m]['refugee']."','".$country_data_map[$m]['lat']."', '".$country_data_map[$m]['lng']."'],";
        }
        $array_string = substr($array_string, 0,-1);
        $array_string .= "]";
        ?>
        <style>
          #map{
            height: 400px;
          }
          a[href^="http://maps.google.com/maps"]{display:none !important}
          .gmnoprint a, .gmnoprint span {
              display:none;
          }
          .gmnoprint div {
              background:none !important;
          }
        </style>
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <div id="map"></div>
        <script type="text/javascript">

            var marker_image = '<?php echo $plugin_image_url;?>';
            // Define your locations: HTML content for the info window, latitude, longitude
            var locations = <?php echo $array_string;?>;

            var map = new google.maps.Map(document.getElementById('map'), {
              center: new google.maps.LatLng(26.3351, 17.2283),
                  mapTypeControl: false,
                  scaleControl: false,
                  streetViewControl: false,
                  overviewMapControl: false,
                  panControl: false,
                  zoomControl: true,
                  zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.SMALL
                  },
                  zoom: 2,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var styles = [
                    {
                        featureType: "landscape",
                        stylers: [
                            { visibility: "on" },
                            { color: "#FFFFFF"}
                        ]
                    },
                    {
                        featureType: "water",
                        stylers: [
                            { visibility: "on" },
                            { color: "#CCCCCC"}
                        ]
                    },
                    {
                       featureType: "administrative",
                       elementType: "geometry.fill",
                       stylers: [
                          { visibility: "off" }
                       ]
                    },
                    {
                        featureType: "all",
                        elementType: "labels",
                        stylers: [
                            { visibility: "off" }
                        ]
                    }
                  ];
                  map.setOptions({styles: styles});

            var infowindow = new google.maps.InfoWindow({
              maxWidth: 160 
            });

            var marker;  
            var markers = new Array();

            // Add the markers and infowindows to the map
            for (var i = 0; i < locations.length; i++) 
            {
                if(locations[i][3]!='' && locations[i][4]!='' && locations[i][2]!='')
                {
                    var scale;
                    if(locations[i][2]<100)
                        scale = locations[i][2];
                    else if(locations[i][2]>100 && locations[i][2]<500)
                        scale = locations[i][2]/25; 
                    else if(locations[i][2]>500 && locations[i][2]<1000)
                        scale = locations[i][2]/60;
                    else if(locations[i][2]>1000 && locations[i][2]<10000)
                        scale = locations[i][2]/275;     
                    else if(locations[i][2]>10000 && locations[i][2]<100000)
                        scale = locations[i][2]/1600;
                    else if(locations[i][2]>100000 && locations[i][2]<500000)
                        scale = locations[i][2]/7500;
                    else if(locations[i][2]>500000 && locations[i][2]<1000000)
                        scale = locations[i][2]/10500;  

                    scale = Math.round(scale);
                    if(scale!=0)
                    {
                        //console.log(scale);
                        marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][3], locations[i][4]),
                        map: map,
                        icon: {
                        url: marker_image,
                        scaledSize: new google.maps.Size(scale, scale),
                        size:new google.maps.Size(scale, scale)
                        }
                        });

                      //ADD EVENT TO SHOW INFOWINDOW
                      google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
                        return function() {
                          infowindow.setContent(locations[i][0]);
                          infowindow.open(map, marker);
                          //marker.setIcon(new google.maps.MarkerImage('http://192.168.5.33/map-marker-hover.png'));
                          //marker.icon.scaledSize = new google.maps.Size(scale,scale);
                          //marker.icon.size = new google.maps.Size(scale,scale);
                        }
                      })(marker, i));

                      //ADD EVENT TO HIDE INFOWINDOW
                      google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
                        return function() {
                          infowindow.close(map, marker);
                          //marker.setIcon(new google.maps.MarkerImage('http://192.168.5.33/map-marker.png'));
                          //marker.icon.scaledSize = new google.maps.Size(scale,scale);
                          //marker.icon.size = new google.maps.Size(scale,scale);
                        }
                      })(marker, i));       
                    }
                }
            }
        </script> 

См. Переменную с именем $ array_string, которую я создал в php, а затем просто echo в js, чтобы создать массив js, а затем я зациклился на lat и долго отображал маркеры.

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

Вам просто нужно скопировать этот код, чтобы внести изменения в минуту, и все готово. Дайте мне знать, если что-то пойдет не так :)

  • 0
    Если я добавлю цикл for для заполнения массива jslat или jslong. 'for (var t = 0; t <location; t ++) {jslat [t] =' <? php echo json_encode ($ lat [t]); ?> '; jslong [t] = '<? php echo json_encode ($ long [t]); ?> '; } 'Я получаю неопределенный индекс: t error. ИДК, если это то, что вы имели в виду.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню