Fatal编程技术网
  • javascript/
  • Javascript 在谷歌地图标记工具提示中显示用户名？

Javascript 在谷歌地图标记工具提示中显示用户名？

javascript google-maps-api-3

Javascript 在谷歌地图标记工具提示中显示用户名？,javascript,google-maps-api-3,tooltip,marker,Javascript,Google Maps Api 3,Tooltip,Marker,我有一个家庭作业，我应该显示一个人的用户名，这个人与谷歌地图标记进行交互并保存其位置。我很难找到解决问题的方法--我已经获得了标记标题/工具提示，以显示所有标记的当前用户名，但无法确定如何获得标记工具提示，以显示移动标记的登录者的用户名 下面是代码（我正在编辑教授提供的代码）： 地图 var映射； // https://developers.google.com/maps/documentation/javascript/reference 函数初始化_映射（）{ var mylatng=ne

我有一个家庭作业，我应该显示一个人的用户名，这个人与谷歌地图标记进行交互并保存其位置。我很难找到解决问题的方法--我已经获得了标记标题/工具提示，以显示所有标记的当前用户名，但无法确定如何获得标记工具提示，以显示移动标记的登录者的用户名

下面是代码（我正在编辑教授提供的代码）：


地图
var映射；
// https://developers.google.com/maps/documentation/javascript/reference
函数初始化_映射（）{
var mylatng=new google.maps.LatLng（）；
window.console&&console.log（“建筑地图…”）；
变量myOptions={
缩放：2，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var marker=new google.maps.marker({
真的，
职位：myLatlng，
地图：地图，
标题：“你的位置”
});
google.maps.event.addListener（标记'dragend'，函数（事件）{
//getPosition为返回一个google.maps.LatLng类
//对于掉落的标记
window.console&&console.log（this.getPosition（））；
//TODO:修复下面两行-在web上搜索解决方案
document.getElementById（“latbox”）.value=this.getPosition（）.lat（）；
document.getElementById（“lngbox”）.value=this.getPosition（）.lng（）；
});
//加上其他几点
window.console&&console.log（“加载”+其他_点.length+“点”）；
对于（var i=0；i<其他_points.length；i++）{
var row=其他_点[i]；
//如果（i<3）{alert（row）；}
var newLatlng=new google.maps.LatLng（第[0]行，第[1]行）；
var iconpath='/static/img/icons/'；
var icon='green.png'；
var displayname=''；
var marker=new google.maps.marker({
职位：newLatlng，
地图：地图，
图标：图标路径+图标，
//TODO:看看是否可以在此处获取用户的displayname
标题：displayname，
});
}
}
//加载其他点
其他_点=
;

纬度：嘿，我不确定你是在SI 364还是SI 664，但不管怎样，我现在正在做同样的作业。Somesh（GSI）告诉我要做的是创建一个新的php数组，就像点数组一样，并在该数组中插入display_名称。然后在代码中找到变量other_points，并使用类似的javascript变量作为名称。然后查看其他_点是如何被读取的，同样地，在googlemap函数中读取名称的变量。我还没弄明白，但也许这会对你有所帮助


<?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();