注意：將數組從php轉換為javascript時，數組到字符串的轉換錯誤

Question

我正在嘗試從數據庫檢索的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

}

}
?>

就像快速檢查一樣，我可以回顯json_encode（$ lat）和json_encode（$ long）並正確顯示它們，但是當我嘗試在javascript中使用它們時，在第58和83行中會收到“注意：數組到字符串的轉換”。我明確指出該位置，例如：

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

它將正確運行，但顯然僅顯示第一個標記。 因此，我知道我可以訪問$ lat和$ long數組的元素。 我覺得這是一個簡單的錯誤，但似乎無法在堆棧上找到類似問題。

任何幫助都會很棒。 謝謝。

Answer 1

// 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中創建了它，然后在js中回顯以創建一個js數組，然后使用lat和long循環顯示標記。

我已經根據鼠標懸停和鼠標移出的值和效果對自定義標記圖像和標記大小縮放進行了一些編碼。

您只需要復制粘貼此代碼即可進行微小更改，即可完成。 讓我知道是否出問題了:)