html5百度地图选中标注点,js 调用百度地图api并在地图上进行打点添加标注
最近要做一个网页,具体内容是:上边有一个标题,下边分成两块,左边是地图。并且地图上有两个点,点击两个点有相应的提示信息,显示数据库里最新的两条数据信息。右边是一些文字说明。本人刚开始学习,做的也不是很好
总体效果如下所示:
首先新建map.php文件,代码如下
/*
创建与数据库的连接
*/
$conn=mysql_connect("","","") or die("can not connect to server");
mysql_select_db("hdm0410292_db",$conn);
mysql_query("set names utf8");
//选择出两辆车插入的最新数据,并将两条语句存在数组里
$sql0="select * from car_info where carID='20140508'order by id desc limit 1";
$sql1="select * from car_info where carID= '20140510' order by id desc limit 1";
$sql=array($sql0,$sql1);
?>
车联网信息展示
html{
height:99%}
body{
height:99.9%;
width:99%;
font-family:楷体_GB2312;
font-size:25px}
#container {height: 100%}
var lon_center = 0;
var lat_center = 0;
var map = new BMap.Map("container");
function addMarker(point,index,s){
var fIcon = new BMap.Icon("car1.png", new BMap.Size(55, 43), {
});
var sIcon = new BMap.Icon("car2.png", new BMap.Size(55, 43), {
});
var myIcon = "";
// 创建标注对象并添加到地图
if(index == 20140508)
myIcon=fIcon;
else
myIcon=sIcon;
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
marker.addEventListener("click",function(){
var opts={width:450,height:500,title:"详细信息"};
var infoWindow = new BMap.InfoWindow(s,opts);
map.openInfoWindow(infoWindow,point);
});
}
//遍历数组里的两条sql语句
foreach ($sql as &$value) {
$query=mysql_query($value);
$row=mysql_fetch_array($query);
?>
var lon= <?php echo $row[longitude] ?>;
var lat= <?php echo $row[latitude] ?>;
lon_center += lon;
lat_center += lat;
var id=<?php echo $row[id] ?>;
var info="
"+"carID: " + "<?php echo $row[carID]?>" + "
" +
"经度: " + "<?php echo $row[longitude]?>" + "
" +
"纬度: " + "<?php echo $row[latitude]?>" + "
" +
"速度: " + "<?php echo $row[speed]?>" + "Km/h" + "
" +
"加速度: " + "<?php echo $row[acceleration]?>" + "
" +
"方向: " + "<?php echo $row[direction]?>" + "
" +
"油量: " + "<?php echo $row[oil]?>" + "
" +
"地址: " + "<?php echo $row[street]?>";
var point = new BMap.Point(lon, lat);
addMarker(point,<?php echo $row[carID] ?>,info);
}
?>
var center = new BMap.Point(lon_center/2,lat_center/2);
map.centerAndZoom(center, 17);
map.enableScrollWheelZoom();
map.php文件主要是显示数据库里的两条信息,将这两条信息在地图上的相应的位置显示出来。
然后再建title.php,这个很简单,就是显示一个标题
信息展示
html{
height:100%;}
body{
height:10%;
width:99%;
font-family:楷体_GB2312;
font-size:25px}
信息展示
然后在建立详细信息说明模块info.php
$conn=mysql_connect("","","") or die("can not connect to server");
mysql_select_db("",$conn);
mysql_query("set names utf8");
$sql0="select * from car_info where carID='20140508'order by id desc limit 1";
$sql1="select * from car_info where carID= '20140510' order by id desc limit 1";
$sql=array($sql0,$sql1);
function htmtocode($content){
$content=str_replace("\n", "
", str_replace(" ", " ", $content));
return $content;
}
?>
信息展示
html{
height:90%;}
body{
height:90%;
width:90%;
font-family:楷体_GB2312;
font-size:20px}
信息展示
$query=mysql_query($value);
$row=mysql_fetch_array($query);
?>
car <?php echo $row[carID]?> 详细信息
CAR ID: <?php echo $row[carID]?>
经度: <?php echo $row[longitude]?>
纬度: <?php echo $row[latitude]?>
速度: <?php echo $row[speed]?> Km/h
加速度: <?php echo $row[acceleration]?>
方向: <?php echo $row[direction]?>
油量: <?php echo $row[oil]?>
地址: <?php echo $row[street]?>
时间: <?php echo $row[date]?>
最后在写一个vanet.php文件,该文件主要是调用前三个文件
信息展示
html5百度地图选中标注点,js 调用百度地图api并在地图上进行打点添加标注相关推荐
- JS调用百度api接口——实现简单的百度页面
描述: JS调用百度api接口--实现简单的百度页面 效果: 实现: css文件: @charset "utf-8"; /* CSS Document */ *{margin: 0 ...
- google地图静态下载和js调用
google地图静态下载和js调用 google staticmap使用 google地图js调用 google地图静态下载 1)注册google帐号 2)开启google static map功能 ...
- Node.JS调用企业微信API:生成渠道二维码
目标: 通过API设置成员的"联系我"方式生成渠道标识二维码,实现标记客户扫码渠道,方便个渠道客户信息统计等. 实现环境: 白码低代码平台(该平台提供企业微信API,可直接调用,减 ...
- 快递接口API:用JS调用快递鸟API接口进行快递单号查询
本文实例为大家分享了JS调用快递鸟API接口,来实现600多家的物流轨迹查询,完成快递单号查询的具体代码,供大家参考,具体内容如下 只需要一步,新建一个Text文本,把下面这段代码复制进去,替换你自己 ...
- html5手机百度地图js,移动端js调用百度地图的问题
web端调用百度地图的时候,移动端浏览, 点击地图中的任意一个地标不是显示详情,但是在pc端是可以显示的. body, html {width: 100%;height: 100%;margin:0; ...
- js百度地图小车html,Web js实现百度地图实时轨迹画线 小车车行驶轨迹 | 彬菌
版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创! 恰饭广告 注意: 1.百度地图ak换成自己在百度地图官网申请 2.建议使用firefox浏览器,google被墙无法调用gp ...
- java百度地图插件下载地址_调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
- 前端js调用百度翻译api接口
目录 1.到百度翻译开放平台注册自己的账号 2.编辑html代码,设计一个简易的页面 3.远程调用百度翻译api 4.完整代码 5.测试 到百度翻译开放平台注册自己的账号 (1)进入网页:开放平台官网 ...
- python调用百度地图实现导航_python 怎么调用百度地图api
应用编程接口(Application programming interface,API)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或 ...
最新文章
- IAP的原理和stm8的IAP
- DIV布局之position详解
- android.support.v7.app.ActionBarActivity
- 回文数、罗马数转整数、整数反转
- Android之RxJava(一)
- Linux 中常见的较为复杂的命令实例
- Aspose.Words简单生成word文档
- 【Lolttery】项目开发日志 (三)维护好一个项目好难
- JavaScript中函数的使用(源码解析)
- es6的模块化export和import
- roseha for linux,ROSEHA for linux安装与操作文档
- 解决Linux连不上外国软件源或者软件源失效
- Java程序线上运行CPU占用100%的处理方法
- 2018厦门大学计算机技术分数线,厦门大学录取分数线2018 厦门大学录取分数最高的专业...
- c语言编写生日祝福语大全,生日卡片祝福语(精选50句)
- 第二章 SQL命令参考-REASSIGN OWNED
- 收藏,光纤光缆60条必备知识!
- 【20210825】【数据分析】两个向量做相关性分析时,需不需要统一量纲?
- oracle入门之登录-创建用户
- 数据结构 | 堆的向上调整和向下调整算法【奇妙的堆排序】
热门文章
- 深度学习训练时GPU利用率忽高忽低问题
- 11、Microsoft Visual Studio 2022 Installer Projects踩坑一
- hackthebox-Toxic writeup
- 365值得吗 office_你可能是正版受害者?吐槽Office 365坑爹之处
- java实现蒲丰投针求_蒲丰投针问题
- LeetCode 迷宫系列(0490, 0499, 0505)
- 一点透视,二点透视,三点透视的理解
- 《30岁之前的每一天》读书笔记
- php 公众号验证回调方法_微信公众号运营的技巧和方法?
- import引入json文件_在React组件中导入Json文件