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 ...
随机推荐
- eclipse中xml文件格式化
eclipse中xml文件格式化(ctrl+shift+f),可能会发现格式化xml文件后很乱,如图: 这不是我想要的样子,我想要的是这样的: 解决办法:windows -> Perferenc ...
- Spring 梳理 - 构造web项目时，使用eclipse如何引用jar包
方法1:直接将jar复制到web项目中的WEB-INF/lib目录中 方法2:构造buildpath时,不使用“外部jar”的形式
- 正睿OI DAY3 杂题选讲
正睿OI DAY3 杂题选讲 CodeChef MSTONES n个点,可以构造7条直线使得每个点都在直线上,找到一条直线使得上面的点最多 随机化算法,check到答案的概率为\(1/49\) \(n ...
- Mac 安装node npm cnpm vue 以及卸载 node 和 npm 的方法 清空npm缓存的方法
S01 安装node(内含npm) 首先,到官网下载长期支持版,截止目前,最新的长期支持版本号是10.16.3 https://nodejs.org/zh-cn/download/ 下载完毕后,安装该 ...
- IDEA 学习笔记之 Console显示日志大小
Console显示日志大小: IntelliJ IDEA默认的Output输出缓存区大小只有1024KB,超过大小限制的就会被清除,而且还会显示[too much output to process] ...
- 基于动态代理的WebAPI/RPC/webSocket框架,一套接口定义,多个通讯方式
API/RPC/webSocket三个看起来好像没啥相同的地方,在开发时,服务端,客户端实现代码也大不一样 最近整理了一下,通过动态代理的形式,整合了这些开发,都通过统一的接口约束,服务端实现和客户端 ...
- kubernetes垃圾回收器GarbageCollector Controller源码分析（二）
kubernetes版本:1.13.2 接上一节:kubernetes垃圾回收器GarbageCollector Controller源码分析(一) 主要步骤 GarbageCollector Con ...
- 使用 Sealos 在 3 分钟内快速部署一个生产级别的 Kubernetes 高可用集群
本文首发于:微信公众号「运维之美」,公众号 ID:Hi-Linux. 「运维之美」是一个有情怀.有态度,专注于 Linux 运维相关技术文章分享的公众号.公众号致力于为广大运维工作者分享各类技术文章和 ...
- Web页面解析过程（浅）
web页面流程 域名解析DNS 域名解析:把域名指向网络空间IP,让人们通过简单的域名访问Web网站的服务. DNS:域名系统 DNS服务器:记录着域名及其对应的IP地址 解析域名: 浏览器中输入 ...
- hibernate 搭建框架
需要用的包 Hibernate的日志记录: * Hibernate日志记录使用了一个slf4j: * SLF4J,即简单日志门面(Simple Logging Facade for Java),不是具 ...