Display username in the Google Maps marker tooltip?

StackOverflow https://stackoverflow.com/questions/22599758

题

I have a homework assignment where I'm supposed to display the username of a person who interacts with and saves the location of a Google Map marker. I'm having difficulty figuring out how to approach the problem--I've gotten as far as getting the marker title/tooltip to display the current username for all markers, but can't work out how I could get the marker tooltip to display the username of the person who was signed in that moved it.

Here's the code (I'm editing code provided by the professor):

<?php
require_once "../../config.php";
require_once $CFG->dirroot."/pdo.php";
require_once $CFG->dirroot."/lib/lms_lib.php";

session_start();

// Sanity checks
$LTI = requireData(array('user_id', 'link_id', 'role','context_id'));
$instructor = isset($LTI['role']) && $LTI['role'] == 1 ;

$p = $CFG->dbprefix;
if ( isset($_POST['lat']) && isset($_POST['lng']) ) {
    if ( abs($_POST['lat']) > 85 || abs($_POST['lng']) > 180 ) {
        $_SESSION['error'] = "Latitude or longitude out of range";
        header( 'Location: '.sessionize('index.php') ) ;
        return;
    }
    $sql = "INSERT INTO {$p}sample_map 
        (context_id, user_id, lat, lng, displayname, updated_at) 
        VALUES ( :CID, :UID, :LAT, :LNG, :DN, NOW() ) 
        ON DUPLICATE KEY 
        UPDATE lat = :LAT, lng = :LNG, displayname = :DN, updated_at = NOW()";
    $stmt = $pdo->prepare($sql);
    $stmt->execute(array(
        ':CID' => $LTI['context_id'],
        ':UID' => $LTI['user_id'],
        ':LAT' => $_POST['lat'],
        ':LNG' => $_POST['lng'],
    ':DN' => $LTI['displayname']));
    $_SESSION['success'] = 'Location updated...';
    header( 'Location: '.sessionize('index.php') ) ;
    return;
}

// Retrieve our row
$stmt = $pdo->prepare("SELECT lat,lng FROM {$p}sample_map 
        WHERE context_id = :CID AND user_id = :UID");
$stmt->execute(array(":CID" => $LTI['context_id'], ":UID" => $LTI['user_id']));
$row = $stmt->fetch(PDO::FETCH_ASSOC);
// The default for latitude and longitude
$lat = 42.279070216140425;
$lng = -83.73981015789798;
if ( $row !== false ) {
    if ( abs($row['lat']) <= 90 ) $lat = $row['lat'];
    if ( abs($row['lng']) <= 180 ) $lng = $row['lng'];
}

//Retrieve the other rows. Retrieve all the points other than you
//Add them to the points array. Made each row an array. Dump em out.
$stmt = $pdo->prepare("SELECT lat,lng,displayname FROM {$p}sample_map 
        JOIN {$p}lti_user
        ON {$p}sample_map.user_id = {$p}lti_user.user_id
        WHERE context_id = :CID AND {$p}sample_map.user_id <> :UID");
$stmt->execute(array(":CID" => $LTI['context_id'], ":UID" => $LTI['user_id']));
$points = array();
while ( $row = $stmt->fetch(PDO::FETCH_ASSOC) ) {
    if ( abs($row['lat']) > 90 ) $row['lat'] = 89;
    if ( abs($row['lng']) > 180 ) $row['lng'] = 179;
    $points[] = array($row['lat']+0.0,$row['lng']+0.0);  
}

?>
<html><head><title>Map for 
<?php echo($LTI['context_title']); ?>
</title>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
var map;

// https://developers.google.com/maps/documentation/javascript/reference
function initialize_map() {
  var myLatlng = new google.maps.LatLng(<?php echo($lat.", ".$lng); ?>);
  window.console && console.log("Building map...");

  var myOptions = {
     zoom: 2,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  var marker = new google.maps.Marker({
    draggable: true,
    position: myLatlng, 
    map: map,
    title: "Your location"
  });

  google.maps.event.addListener(marker, 'dragend', function (event) {
    // getPosition returns a google.maps.LatLng class for
    // for the dropped marker
    window.console && console.log(this.getPosition());
    // TODO: Fix these next two lines - search the web for a solution
    document.getElementById("latbox").value = this.getPosition().lat();
    document.getElementById("lngbox").value = this.getPosition().lng();
  });

  // Add the other points
  window.console && console.log("Loading "+other_points.length+" points");
  for ( var i = 0; i < other_points.length; i++ ) {
    var row = other_points[i];
    // if ( i < 3 ) { alert(row); }
    var newLatlng = new google.maps.LatLng(row[0], row[1]);
    var iconpath = '<?php echo($CFG->staticroot); ?>/static/img/icons/';
    var icon = 'green.png';
  var displayname = '<?php echo($LTI['user_displayname']) ?>';
    var marker = new google.maps.Marker({
      position: newLatlng,
      map: map,
      icon: iconpath + icon,
      // TODO: See if you can get the user's displayname here
      title : displayname,
     });
  }
}

// Load the other points 
other_points = 
<?php echo( json_encode($points));?> 
;
</script>
</head>
<body style="font-family: sans-serif;" onload="initialize_map();">
<?php
if ( isset($_SESSION['error']) ) {
    echo '<p style="color:red">'.$_SESSION['error']."</p>\n";
    unset($_SESSION['error']);
}
if ( isset($_SESSION['success']) ) {
    echo '<p style="color:green">'.$_SESSION['success']."</p>\n";
    unset($_SESSION['success']);
}

?>
<div id="map_canvas" style="margin: 10px; width:500px; max-width: 100%; height:500px"></div>
<form method="post">
 Latitude: <input size="30" type="text" id="latbox" name="lat" 
  <?php echo(' value="'.htmlent_utf8($lat).'" '); ?> >
 Longitude: <input size="30" type="text" id="lngbox" name="lng"
  <?php echo(' value="'.htmlent_utf8($lng).'" '); ?> >
 <button type="submit">Save Location</button>
</form>
<?php
footerContent();
有帮助吗？

解决方案

Hey I'm not sure if you're in SI 364 or SI664 but anyway I'm working on that same assignment right now. What Somesh(the GSI) told me to do is create a new php array like the one for points and insert the display_names in that array. Then find the variable other_points in the code and have a similar javascript variable for names. Then see how the other_points is being read and similarly read the variable for the name in the google map function. I haven't actually figured it out yet but maybe that might help you.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top