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 ...
随机推荐
- Java String 对象，你真的了解了吗？
String 对象的实现 String对象是 Java 中使用最频繁的对象之一,所以 Java 公司也在不断的对String对象的实现进行优化,以便提升String对象的性能,看下面这张图,一起了解一 ...
- 导出wordpress数据库Fatal error: Cannot 'break' 2 levels
今天我打算备份一下我在Linux下用宝塔面板搭建的phpmyadmin导出wordpress数据库.选择数据库后给我一个Fatal error: Cannot 'break' 2 levels in ...
- 使用JSP+Servlet+Jdbc+Echatrs实现对豆瓣电影Top250的展示
使用JSP+Servlet+Jdbc+Echatrs实现对豆瓣电影Top250的展示 写在前面: 有的小伙伴,会吐槽啦,你这个标题有点长的啊.哈哈 ,好像是的!不过,这个也是本次案例中使用到的关键技术 ...
- 基于操作系统原理的Linux的内存管理
一.实验目的 1．理解虚拟内存.磁盘缓存的概念. 2．掌握基本的内存管理知识. 3．掌握查看实时查看内存.内存回收的方法 二.实验内容 1． 监控内存使用情况 2． 检查和回收内容 三.实验平台 1． ...
- 将CDH中的hive和hbase相互整合使用
一..hbase与hive的兼容版本: hive0.90与hbase0.92是兼容的,早期的hive版本与hbase0.89/0.90兼容,不需要自己编译. hive1.x与hbase0.98.x或则 ...
- Hadoop点滴-HDFS命令行接口
1.-help[cmd] 显示命令的帮助信息 ./hdfs dfs -help ls1 2.-ls(r) 显示当前目录下的所有文件 -R层层循出文件夹 ./hdfs dfs -ls /log/map ...
- linux服务器创建虚拟路径解决文件上传路径隔离问题
需求环境 图片上传最简单的就是上传web项目下,这样图片与项目不可分离会产生很多不必要的影响.例如:重新部署项目需要把所有上传的图片再copy一份等. 图片与项目分离有好几种方式: 方式一.在linu ...
- Docker系列（一）：容器监控工具Weave Scope安装
项目进行容器化之后,配套的基础设施包括监控.编排.管理等都需要进行一并完善.这里也是自己一边学习一边进行记录. Weave Scope 的最大特点是会自动生成一张 Docker 容器地图,让我们能够直 ...
- centos7.x 部署主、从DNS服务器
1.准备 例:两台192.168.219.146(主), 192.168.219.147(从), 域名www.panyangduola.com 主.从DNS服务器均需要安装bind.bind-chro ...
- ssrf漏洞学习(PHP)
自己最近原本是想深入的学习一下关于xss.csrf的东西的,可是感觉这些东西需要有很好的js的基础来进行学习..还有感觉自己感觉也差不多该要学习内网渗透了..正好ssrf在内网这一块也是比较有用的.于 ...