百度地图实时更新当前位置

浏览:4389 发布日期:2018年03月22日分类:用法示例

下图是完成的效果截图。

第一步:在百度申请账号建立应用,获取ak值。

第二步: 写html页面 ,代码如下

<?php

// 页面刷新秒数
$t = $_GET['t'];
$time = empty($t) ? '5000' : $t.'000';
// 数据刷新秒数
$h = $_GET['h'];
// 输入地址名转换ID
$k = $_GET['k'];
$cityName = empty($k) ? '北京市' : $k;
?>
<!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" />

<title>司机位置地图展示</title>
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>

<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=申请获得ak值"></script>

<script type="text/javascript" src="__ASSETS__/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

// 定义存坐标点数组
var markers = new Array();
$(document).ready(function() {
getdata();
setInterval("frash()",<?php echo $time?>); // 间隔秒数刷新
});

// 刷新页面
function frash(){
getdata();
markers.splice(0,markers.length);//清空数组
}

// 获取数据
function getdata(){

var cityName = document.getElementById("cityName").value;
var seconds = document.getElementById("seconds").value;
//alert(cityName);alert(seconds);

$.ajax({
url : '{:U("Home/Map/lists")}',
type: 'get',
async: true, //异步请求
data: {k: cityName,h: seconds},
success:function(data){

var json = eval(data);
for(var i=0; i<json.length; i++)
{
markers[i] = {position:{lng:json[i].jingdu,lat:json[i].weidu,info:json[i].vehicleno}};
}

map.clearOverlays(); // 清空地图上标注点
addMapOverlay(); // 设置坐标点
}
});
}

</script>
</head>
<body>

<from name="myfrom">
<input type="hidden" id="cityName" value="{$cityName}">
<input type="hidden" id="seconds" value="{$h}">
<div id="allmap"></div>
</from>

</body>
</html>

<script type="text/javascript">
// 百度地图API功能
var marker;
var zoomSize = 17;
var map = new BMap.Map("allmap");
// 用城市名设置地图中心点
var cityName = document.getElementById("cityName").value;
//alert(cityName);

map.centerAndZoom(cityName, zoomSize);
map.setDefaultCursor("crosshair"); // 设置地图默认的鼠标指针样式
map.enableScrollWheelZoom(); // 启用滚轮放大缩小,默认禁用。
map.enableContinuousZoom(); // 启用地图惯性拖拽,默认禁用

// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor : BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type : BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation : true
});
map.addControl(navigationControl);

// 编写自定义函数,创建标注
function addMarker(point, title) {

// 是引用图标的名字以及大小,注意大小要一样
var myIcon = new BMap.Icon(
"/Public/uploads/51-20.png",
new BMap.Size(100, 2*100)); // 指定定位位置
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, {
icon : myIcon
});

// 创建信息窗口对象
var infoWindow = new BMap.InfoWindow(title, {
maxwidth : 20, // 信息窗口宽度
height : 5, // 信息窗口高度
});
map.addOverlay(marker);
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
map.zoomIn();
});
marker.setLabel(new BMap.Label(title, {
offset : new BMap.Size(6, 4)
}));
}

// 设置坐标点
function addMapOverlay(){
// alert(markers.length+"---2");
// alert(markers[0].position.lng+"----3");
// alert(markers[0].position.lat+"----4");
for(var i = 0; i < markers.length; i++ ){
var point = new BMap.Point(markers[i].position.lng, markers[i].position.lat);
addMarker(point, markers[i].position.info);
}
}

</script>

第三步:写对应的控制器;

<?php
namespace Home\Controller;
use Think\Controller;

class MapController extends Controller {

public function index(){
$this->display();
}

public function lists(){

$time = time(); // 当前时间戳
$h = I('h'); // 数据刷新秒数
$h = empty($h) ? '30' : $h;
$k = I('k'); // 输入地址名转换ID

$cityName = empty($k) ? '北京市' : $k;
$areaid = M('area')->where("name like '%$cityName%'")->getField('id');

$where['areaid'] = $areaid;
$list = M('driver')
->where($where)
->where(" $time - online < $h ")
->field('jingdu,weidu,vehicleno')
->select();
echo json_encode($list);
}

}

评论() 相关

后面还有条评论,

您需要登录后才可以评论登录 | 立即注册

xtwlkj9999 10-25
ThinkPHP在线客服系统 Ai智能客服系统在线客服源码
fatie 03-29
安全私密的聊天系统可免费使用可转让可定制
dingji 03-23
2022最完备原生电商多端发布支持源码及定制
fatie 03-17
安全私密的聊天系统可免费使用可转让可定制
springblog 01-15
springboot后台管理系统|springboot在线商城购物系统

收藏

赞

Smile_菜菜

积分:856 等级:LV2

热点推荐

(追記) (追記ここまで)

最新更新

我们

合作

网站

信息

ThinkPHP 是一个免费开源的,快速、简单的面向对象的轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。