NPObject将KML对象写入Google Earth API时出错

Question

I'm trying to write a quick script to pull data from facebook and then graph it on a google map instance just using simple extruded polygons. I've gotten all the social stuff and the ajax working but no matter what I do every time i call .getcoordinates() on anything I get an NPObject error. Specifically "Error calling method on NPObject." on the first line in my document where I've called .getcoordinates(). I looked around StackO and have tried everything anyone else has been putting up on anything relating to NPObject errors to no avail. Any ideas?

header js:

function drawgraph(name, z, x, y) {

    // Create the placemark.
    var polygonPlacemark = ge.createPlacemark('');

    // Create the polygon.
    var polygon = ge.createPolygon('');
    polygon.setAltitudeMode(ge.ALTITUDE_RELATIVE_TO_GROUND);
    polygonPlacemark.setGeometry(polygon);

    // Add points for the outer shape.
    var outer = ge.createLinearRing('');
    outer.setAltitudeMode(ge.ALTITUDE_RELATIVE_TO_GROUND);
    outer.getCoordinates().pushLatLngAlt(x - 0.005, y - 0.005, z);
    outer.getCoordinates().pushLatLngAlt(x + 0.005, y + 0.005, z);
    outer.getCoordinates().pushLatLngAlt(x - 0.005, y + 0.005, z);
    outer.getCoordinates().pushLatLngAlt(x + 0.005, y - 0.005, z);
    polygon.setOuterBoundary(outer);

    //Create a style and set width and color of line
    polygonPlacemark.setStyleSelector(ge.createStyle(''));
    var lineStyle = polygonPlacemark.getStyleSelector().getLineStyle();
    lineStyle.setWidth(5);
    lineStyle.getColor().set('9900ffff');

    // Add the placemark to Earth.
    ge.getFeatures().appendChild(polygonPlacemark);
}   

var ge = null;
google.load("earth", "1", {"other_params":"sensor=true"});

function init() {
  init3d();
}

function initCB(instance) {
  ge = instance;
  ge.getWindow().setVisibility(true);
  ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);    
}

function failureCB(errorCode) {
}

function init3d() {
    google.earth.createInstance('map3d', initCB, failureCB);
}   

I call init() on the body onload

html frontend:

<div id="map3d" style="height: 600px; width:100%; margin:0; "></div>
<div id="form" style="text-align:center; width:100%; margin-top:10px;">
<button id = "getcoord" style="background-color:#707070">Get coordinates of Current view</button>
<form id = "form" style="display:inline;" method="GET">
<input type="text" name="place" id="place" >
<select name="dist" id="dist">
   <option value="1609">1 Mile</option>
   <option value="3218">2 Miles</option>
   <option value="8046">5 Miles</option>
   <option value="16090">10 Miles</option>
 </select>
 <select name="number" id="number">
   <option value="10">10</option>
   <option value="50">50</option>
   <option value="100">100</option>
   <option value="1000">1000</option>
   <option value="5000">5000</option>
 </select>
<button id="submit" type="submit">Submit</button>
</form>
</div>

onload js:

$('#form').submit(function(event){
    var fdata = {
        'place'             : $('#place').val(),
        'dist'              : $('#dist').val(),
        'quantity'          : $('#number').val(),
    };
    console.log(fdata);
    $.ajax({
        type: "POST",
        url: "fb_back.php",
        data: fdata,
        cache:false,
    }).done(function(data) {
            for(var i = 0; i < data.length; i++) {

                // get variables from json return
                var name = +(data[i]["name"]);
                var hgt = +(data[i]["checkins"]);
                var lat = +(data[i]["lat"]);
                var lng = +(data[i]["lng"]);

                drawgraph(name, hgt, lat, lng);// create the polygon

            } // for loop
        }),//success
    event.preventDefault();
});//form submit

php backend getting an ajax call:

//get ajax data
$distance = $_POST["dist"];
$place = $_POST["place"];
$limit = $_POST["quantity"];

// get the lat and long of the sent address to use for the fb request 
$geo_return = file_get_contents("https://maps.googleapis.com/maps/api/geocode/json?    address=".urlencode($place)."&key=AIzaSyDeEkWgri9GAvDVE4QN9j2IeO4_2Dj61iM");
$geo_returned = json_decode($geo_return);
foreach ($geo_returned->results as $results){
$lat = $results->geometry->location->lat;
$lng = $results->geometry->location->lng;
}

//make the fb request for a token and for the data then decode the data and stick it into the $decoded array
$center = $lat . "," . $lng;
$fb_key = file_get_contents("https://graph.facebook.com/oauth/access_token?client_id=[my id]&client_secret=[my secret]grant_type=client_credentials");
$ini = "https://graph.facebook.com/v2.1/search?            limit=".$limit."&offset=0&type=place&center=".$center."&distance=".$distance."";
$fb_get = $ini . "&" . $fb_key;
$fb_got = file_get_contents($fb_get);
$decoded = json_decode($fb_got, true);
$decoded = $decoded['data'];

//setup the foreach loop, the $data variable is where each entry will be stored
$data = array();
$i = 0;
foreach ($decoded as $value) {  

//pull the name and the fb id of the place from the object in this iteration of the loop
$name = $value['name'];
$each_id = $value['id'];

//pull the fb json file for this place using the id
$pull = "https://graph.facebook.com/v2.1/". $each_id . "?" . $fb_key;
$detail_array = file_get_contents($pull);
$decode_detail = json_decode($detail_array);

//pull out the checkins as well as the latitude and longitude of the place
$checkins = $decode_detail->checkins;       
$fblat = $decode_detail->location->latitude;
$fblng = $decode_detail->location->longitude;

//make another associative array with the variables for the kml objects in fb_front
$entry = array(
        "name" => $name,
        "checkins" => $checkins,
        "lat" => $fblat,
        "lng" => $fblng,
    );

//store the entry array and step the index variable
$data[$i]=$entry;
$i++;
}

//dump it back out to fb_front
var_dump(json_encode($data));

I'm really sorry to dump a wall of text on you guys I am just out of ideas.

Answer 1

The issue here is that the Google Earth plugin is not immediately available on page load. The NPObject error will occur anytime the connection between the JavasCript on your page and the Google Earth plugin cannot communicate. This can happen when the GE plugin has not yet initialized, or can also happen if the plugin crashes.

In your case in the code above, you need to add this line after you call the google.load

google.setOnLoadCallback(init3d);

var ge = null;
google.load("earth", "1", {"other_params":"sensor=true"});
google.setOnLoadCallback(init3d);

and remove the init3d(); call in your page load. The GE plugin loads asynchonously once the page has loaded and you need to use the google.setOnLoadCallback to get the actual event that lets you know the GE plugin is ready to go. Updated script below.

function drawgraph(name, z, x, y) {

  // Create the placemark.
  var polygonPlacemark = ge.createPlacemark('');

  // Create the polygon.
  var polygon = ge.createPolygon('');
  polygon.setAltitudeMode(ge.ALTITUDE_RELATIVE_TO_GROUND);
  polygonPlacemark.setGeometry(polygon);

  // Add points for the outer shape.
  var outer = ge.createLinearRing('');
  outer.setAltitudeMode(ge.ALTITUDE_RELATIVE_TO_GROUND);
  outer.getCoordinates().pushLatLngAlt(x - 0.005, y - 0.005, z);
  outer.getCoordinates().pushLatLngAlt(x + 0.005, y + 0.005, z);
  outer.getCoordinates().pushLatLngAlt(x - 0.005, y + 0.005, z);
  outer.getCoordinates().pushLatLngAlt(x + 0.005, y - 0.005, z);
  polygon.setOuterBoundary(outer);

  //Create a style and set width and color of line
  polygonPlacemark.setStyleSelector(ge.createStyle(''));
  var lineStyle = polygonPlacemark.getStyleSelector().getLineStyle();
  lineStyle.setWidth(5);
  lineStyle.getColor().set('9900ffff');

  // Add the placemark to Earth.
  ge.getFeatures().appendChild(polygonPlacemark);
}

var ge = null;
google.load("earth", "1", {
  "other_params": "sensor=true"
});

function init() {

}

function initCB(instance) {
  ge = instance;
  ge.getWindow().setVisibility(true);
  ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
}

function failureCB(errorCode) {}

function init3d() {
  google.earth.createInstance('map3d', initCB, failureCB);
}
function drawgraph(name, z, x, y) {

  // Create the placemark.
  var polygonPlacemark = ge.createPlacemark('');

  // Create the polygon.
  var polygon = ge.createPolygon('');
  polygon.setAltitudeMode(ge.ALTITUDE_RELATIVE_TO_GROUND);
  polygonPlacemark.setGeometry(polygon);

  // Add points for the outer shape.
  var outer = ge.createLinearRing('');
  outer.setAltitudeMode(ge.ALTITUDE_RELATIVE_TO_GROUND);
  outer.getCoordinates().pushLatLngAlt(x - 0.005, y - 0.005, z);
  outer.getCoordinates().pushLatLngAlt(x + 0.005, y + 0.005, z);
  outer.getCoordinates().pushLatLngAlt(x - 0.005, y + 0.005, z);
  outer.getCoordinates().pushLatLngAlt(x + 0.005, y - 0.005, z);
  polygon.setOuterBoundary(outer);

  //Create a style and set width and color of line
  polygonPlacemark.setStyleSelector(ge.createStyle(''));
  var lineStyle = polygonPlacemark.getStyleSelector().getLineStyle();
  lineStyle.setWidth(5);
  lineStyle.getColor().set('9900ffff');

  // Add the placemark to Earth.
  ge.getFeatures().appendChild(polygonPlacemark);
}

var ge = null;
google.load("earth", "1", {
  "other_params": "sensor=true"
});

function init() {
  init3d();
}

function initCB(instance) {
  ge = instance;
  ge.getWindow().setVisibility(true);
  ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
}

function failureCB(errorCode) {}

function init3d() {
  google.earth.createInstance('map3d', initCB, failureCB);
}
// This will waint until GE plugin is actually loaded and ready
google.setOnloadCallback(init3d);

This page has a great tutorial that walks through the required steps to get the GE plugin loaded on your page properly ( https://developers.google.com/earth/documentation/ )