H5实现图表和地图
H5实现图表和地图的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>图表和地图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<style type="text/css">
html,body{
width:100%;
height:100%;
}
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
width:603px;
padding-top:3px;
overflow:hidden;
}
.btn{
width:142px;
}
#container{
width:100%;
height:300px;
}
</style>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<div id="container"style="margin-bottom: 50px"></div> <script type="text/javascript" src="asset/js/jquery-2.2.4.js"></script>
<script type="text/javascript" src="asset/js/echarts.min.js"></script> <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IZJBZ-PAUKF-YQOJ6-JM4TR-T3RT5-N6BM5"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IZJBZ-PAUKF-YQOJ6-JM4TR-T3RT5-N6BM5&libraries=drawing,geometry,place,convertor,visualization"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
xAxis: {
type: 'category',
data: [1,2,3,4,5],
axisLabel:{
textStyle:{
fontSize:8
}
}
},
yAxis: {
type: 'value',
axisLabel:{
formatter:'{value}℃',
textStyle:{
fontSize:8
}
}
},
series: [
{
data: [20,30,50,60,30],
type: 'line',
smooth: true,
symbol: 'none',//去掉小圆点
itemStyle: {
normal: {
color: '#537FE2',
lineStyle: {
color: '#537FE2'
}
}
}
},
{
data: [10,10,10,10,10],
type: 'line',
smooth: false,
symbol: 'none',//去掉小圆点
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted', //'dotted'虚线 'solid'实线
color:'#2BB4DF'
}
}
}
},
{
data: [60,60,60,60,60],
type: 'line',
smooth: false,
symbol: 'none',//去掉小圆点
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted', //'dotted'虚线 'solid'实线
color:'#2BB4DF'
}
}
}
},
],
})
</script>
<script>
window.onload = function(){ //直接加载地图
//初始化地图函数 自定义函数名init
function init() {
//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(39.910,116.399), // 地图的中心地理坐标。
zoom:14//地图的中心地理坐标。
}); var polyline = new qq.maps.Polyline({
path: [
new qq.maps.LatLng(39.915, 116.399),
new qq.maps.LatLng(39.920, 116.389),
new qq.maps.LatLng(39.930, 116.399)
],
strokeColor: '#000000',
strokeWeight: 2,
map
}); var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(39.920,116.380),
map: map,
});
var anchor = new qq.maps.Point(0, 39),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
markerIcon = new qq.maps.MarkerImage(
"https://3gimg.qq.com/lightmap/api_v2/2/4/99/theme/default/imgs/marker.png",
size,
origin,
anchor
);
marker.setIcon(markerIcon); } //调用初始化函数地图
init();
}
</script>
</body>
</html>
手机端效果图如下：
我们对以上代码进行分析，
图表使用了echarts，引入了echarts.min.js。
地图用的是腾讯地图，引用了线上的两个库。
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IZJBZ-PAUKF-YQOJ6-JM4TR-T3RT5-N6BM5"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IZJBZ-PAUKF-YQOJ6-JM4TR-T3RT5-N6BM5&libraries=drawing,geometry,place,convertor,visualization"></script>
图表是折线图，设置好x轴（xAxis）的数据,
xAxis: {
type: 'category',
data: [1,2,3,4,5],
axisLabel:{
textStyle:{
fontSize:8
}
}
},
在formatter里设置y轴的单位，
yAxis: {
type: 'value',
axisLabel:{
formatter:'{value}℃',
textStyle:{
fontSize:8
}
}
},
然后设置y轴（yAxis）的数据。
series: [
{
data: [20,30,50,60,30],
type: 'line',
smooth: true,
symbol: 'none',//去掉小圆点
itemStyle: {
normal: {
color: '#537FE2',
lineStyle: {
color: '#537FE2'
}
}
}
},
{
data: [10,10,10,10,10],
type: 'line',
smooth: false,
symbol: 'none',//去掉小圆点
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted', //'dotted'虚线 'solid'实线
color:'#2BB4DF'
}
}
}
},
{
data: [60,60,60,60,60],
type: 'line',
smooth: false,
symbol: 'none',//去掉小圆点
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted', //'dotted'虚线 'solid'实线
color:'#2BB4DF'
}
}
}
},
],
可以画出多条折线，并设置颜色、虚实线、是否加上小圆点等状态。
地图则可以设置中心坐标，
//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(39.910,116.399), // 地图的中心地理坐标。
zoom:14//地图的中心地理坐标。
});
并根据多个点的坐标画出路径线（polyline），
var polyline = new qq.maps.Polyline({
path: [
new qq.maps.LatLng(39.915, 116.399),
new qq.maps.LatLng(39.920, 116.389),
new qq.maps.LatLng(39.930, 116.399)
],
strokeColor: '#000000',
strokeWeight: 2,
map
});
然后可以设置标记（marker）的位置和更换标记的图标。
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(39.920,116.380),
map: map,
});
var anchor = new qq.maps.Point(0, 39),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
markerIcon = new qq.maps.MarkerImage(
"https://3gimg.qq.com/lightmap/api_v2/2/4/99/theme/default/imgs/marker.png",
size,
origin,
anchor
);
marker.setIcon(markerIcon);
代码示例地址：https://github.com/LuoYiHao/chart-and-map。
H5实现图表和地图的更多相关文章
- AGS API for JavaScript 图表上地图
原文:AGS API for JavaScript 图表上地图 图1 图2 图3 -------------------------------------华丽丽的分割线--------------- ...
- uniapp H5引入腾讯地图
在网上搜索了许多关于uniapp引入腾讯地图的方法都以失败告终,我开发的应用主要使用于H5,小程序与H5是不同的sdk,就不在这说了,况且小程序有手把手教学,可参考腾讯地图官网https://lbs. ...
- H5微信通过百度地图API实现导航方式二
要有服务器才行哦 <!DOCTYPE html><html><head> <meta http-equiv="Content-Type&quo ...
- H5微信通过百度地图API实现导航方式一
根据业务需求修改百度API,实现微信中的导航功能.因为源码中SearchInfoWindow_min.js有点小问题(部分小城市公交线路少,查不到路线时没有提示),所以这里在源码的基础上改了一点点.可 ...
- 微信H5页面嵌入百度地图---解决手机的webKit定位，ios系统对非https网站不提供支持问题
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yGQt ...
- H5调用腾讯地图
获取当前定位的经纬度并在容器内显示当前位置 (安卓上的位置有点偏差) 在vue的index.html中需要引用 template <div id="container" st ...
- H5页面，百度地图点击事件
需求:用户点击地图的时候获取地址街道,编码等详细信息. 然后看百度API文档,看到了click事件,关键时候还是需要看文档的. 实现 这样子虽然在浏览器的手机模拟器下是没有问题的 但是放在机器上测试的 ...
- h5跳转高德地图
<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a>
- h5画图表
折线: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...
随机推荐
- jupyter编辑快捷键
Jupyter笔记本有两种不同的键盘输入模式. 编辑模式允许您将代码或文本输入到一个单元格中,并通过一个绿色的单元格来表示 命令模式将键盘与笔记本级命令绑定在一起,并通过一个灰色的单元格边界显示,该边 ...
- 欢迎加入强哥的 Android 开发交流群
最近建了一个 Android 开发交流群,但不限于交流移动端.前端和后端等相关技术. 本群的宗旨:让所有学习的群友都有进步的机会. 1. 经验交流 在我们学习时遇到困境,或者开发过程中遇到难题,都可以 ...
- 记一次Burp Suite的使用实例
下载完的Bur是这样的,双击jar即可 最右边的键一直按,傻瓜式 先将要抓包的网页打开,此次以上传图片为例 第一步当然是先下载Burp Suite之后打开,查看设置代理地 ...
- Spring 梳理 - AOP那些学术概念—通知、增强处理连接点（JoinPoint)切面（Aspect）
Spring AOP那些学术概念—通知.增强处理连接点(JoinPoint)切面(Aspect) 1.我所知道的AOP 初看起来,上来就是一大堆的术语,而且还有个拉风的名字,面向切面编程,都说是 ...
- 性能测试的基础知识--QPS和TPS
基本概念: QPS:Queries Per Second意思是“每秒查询率” ,是一台服务器每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准. TPS:Transa ...
- 正睿OI DAY3 杂题选讲
正睿OI DAY3 杂题选讲 CodeChef MSTONES n个点,可以构造7条直线使得每个点都在直线上,找到一条直线使得上面的点最多 随机化算法,check到答案的概率为\(1/49\) \(n ...
- python2和3区别
核心类差异 Python3对Unicode字符的原生支持 Python2中使用 ASCII 码作为默认编码方式导致string有两种类型str和unicode,Python3只支持unicode的st ...
- Android_布局
<该文章参考各大博客以及书籍总结而来,如有问题欢迎指出^ ^> 一.五大传统布局+新布局 线性布局——LinearLayout 相对布局——RelativeLayout 帧布局——Fram ...
- 修复IScroll点击无效，增加scrollTo数值容错处理
个人博客: https://chenjiahao.xyz ============== 最近半年都处于一个非常忙碌的状态,直到现在才有功夫腾出时间记录这段时间以来踩过的一个个坑. 今天先记录关于ISc ...
- ssrf漏洞学习(PHP)
自己最近原本是想深入的学习一下关于xss.csrf的东西的,可是感觉这些东西需要有很好的js的基础来进行学习..还有感觉自己感觉也差不多该要学习内网渗透了..正好ssrf在内网这一块也是比较有用的.于 ...