百度地圖api 實時顯示每個人的位置和頭像

阿新 • • 發佈：2019-01-15

UserMapController.class.php

<?php
namespace Home\Controller;
use Think\Controller;
class UserMapController extends Controller {
//實時顯示活動中使用者的位置介面
public function showplace(){
$activity_id = I('post.activity_id/d');
$uids = M('user_join')->where(array('activity_id'=>$activity_id,'status'=>1))->field('uid')->order('id asc')->select();

foreach ($uids as $value) {
$user_map = M('user_map')->where(array('uid'=>$value['uid']))->field('lng,lat')->find();
if(!empty($user_map)){
$position[] = $user_map;
$headimgurl = M('user')->where(array('id'=>$value['uid']))->getField('headimgurl');
$images[] = '/Uploads/headimg/'.$headimgurl.'_small.jpg';
}
}

//加上管家圖示
$activity = M('activity')->where(array('id'=>$activity_id))->field('manager_id')->find();
$position[count($position)] = M('user_map')->where(array('uid'=>$activity['manager_id']))->field('lng,lat')->find();
$images[count($images)] = '/Public/images/manager.jpg';

// $position[count($position)] = M('activity_address')->where(array('id'=>$activity['address_id']))->field('lat,lng')->find();
// $images[count($images)] = '/Public/images/logo.jpg';

foreach ($position as $value) {
if($value){
$arr[] = array_values($value);
}
}

$pos_json = json_encode($arr);
$img_json = json_encode($images);
$data['pos'] = $pos_json;
$data['img'] = $img_json;
$this->ajaxreturn($data);
}

//使用者地理位置資訊
public function place(){
$activity_id = I('activity_id/d');
$activity = M('activity')->where(array('id'=>$activity_id))->field('address_id')->find();
$position = M('activity_address')->where(array('id'=>$activity['address_id']))->field('lat,lng,address_name')->find();
$this->assign('position',$position);
$this->assign('activity_id',$activity_id);
$this->display();
}
}

place.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的ak"></script>
<script src="/Public/js/libs/jquery-3.1.1.min.js"></script>
<title>xxxx</title>
</head>
<body>
<div id="allmap" style="min-width: 100%;min-height: 100%;"></div>
</body>
</html>
<script type="text/javascript">
$(function(){
var activity_id = '{$activity_id}';
function myInterval(){
$.ajax({
url:"{:U('Home/UserMap/showplace')}",
data:{activity_id:activity_id},
type:'post',
dataType:'json',
success:function(data){
var jsondata = eval('('+data.pos+')');
var jsonimgs = eval('('+data.img+')');
loading(jsondata,jsonimgs);
}
})
}
settimeout（myInterval()）;

function loading(jsondata,jsonimgs){
//GPS座標
var my_lng = '{$position.lng}';
var my_lat = '{$position.lat}';
var address_name = '{$position.address_name}';
var ggPoint = new BMap.Point(my_lng ,my_lat);
//地圖初始化
var bm = new BMap.Map("allmap");
bm.centerAndZoom(ggPoint, 15);
bm.addControl(new BMap.NavigationControl());

var points = [];
for (var i = 0; i < jsondata.length; i++) {
points.push(new BMap.Point(jsondata[i][0],jsondata[i][1]));
}
points.push(ggPoint);
jsonimgs.push("/Public/images/timg.png");

//座標轉換完之後的回撥函式
translateCallback = function (data){
if(data.status === 0) {
for (var i = 0; i < data.points.length; i++) {
var myIcon = new BMap.Icon(jsonimgs[i], new BMap.Size(60,60));
var marker = new BMap.Marker(data.points[i],{icon:myIcon});
bm.addOverlay(marker);
}
}
}
setTimeout(function(){
var convertor = new BMap.Convertor();
convertor.translate(points, 1, 5, translateCallback)
}, 1000);
}
})
</script>

百度地圖api 實時顯示每個人的位置和頭像

百度地圖api 實時顯示每個人的位置和頭像

百度地圖API JavaScript顯示人員分布信息

百度地圖API定位+顯示位置

Android 使用百度地圖API來顯示地圖

百度地圖API應用之——利用定位SDK和地圖SDK來進行定位和顯示當前位置

使用html5獲取當前手機的經緯度，並接入百度地圖API，查詢出當前位置

使用者Ip地址和百度地圖api介面獲取使用者地理位置（經緯度座標，城市）

使用百度地圖api實現定位及選擇位置功能

百度地圖API一：根據標註點坐標範圍計算顯示縮放級別zoom自適應顯示地圖

百度地圖API二：根據標註點坐標範圍計算顯示縮放級別zoom自適應顯示地圖

百度地圖api定位，根據經緯度顯示當前城市名

百度地圖api--拖動地圖顯示經緯度與顯示當前位置

百度地圖api之固定標記點跳動,點選顯示詳情

百度地圖API三：實時軌跡動態展現

百度地圖api 自定義駕車線路規劃車輛實時定位

百度地圖api在Html中顯示，在jsp頁面中不顯示解決方法

如何用百度地圖api地圖上顯示自己位置以及資料庫裡的位置

百度地圖API ajax非同步獲取資料庫資訊頁面顯示多點標註和標註框

百度地圖api(javascript)--高亮顯示所選行政區劃

Android Studio中使用百度地圖API，不顯示地圖的問題解決辦法

百度地圖api 實時顯示 每個人的位置和頭像

相關推薦

百度地圖api 實時顯示每個人的位置和頭像