echars显示地图

最新推荐文章于 2024-08-13 18:13:57 发布

佳亮

最新推荐文章于 2024-08-13 18:13:57 发布

阅读量2k

点赞数

分类专栏： javaweb 文章标签：地图 echarts3-0

本文链接：https://blog.csdn.net/zahngjialiang/article/details/78276143

版权

本文介绍了如何利用Echarts库将后台数据呈现到地图上，展示了实现这一功能的基本步骤，包括引入Echarts及相关地图插件，并提供了页面和controller的简单示例。

摘要由CSDN通过智能技术生成

功能比较简单，后台传数据给页面，页面将传过来的数据显示在地图上，效果图如下：

这里写图片描述

页面首先需要导入echars的相关插件和地图显示的相关插件。
页面如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图显示</title>

<#include "../../common/js.ftl">
<#include "../../common/css.ftl">

    <script type="text/javascript"
    src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript"
    src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript"
    src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript"
    src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript"
    src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript"
    src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript"
    src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<style>
html {
    height: 100%;
    margin: 0;
}

body {
    height: 100%;
    margin: 0;
}




       .box{
           width: 120px;
           height: 120px;
           left: 0;
           top: 0;
           cursor: pointer;
           background: rgba(220,220,220,.9);
           position: absolute;
           box-shadow: 5px 5px 5px #ccc;
           border-radius: 10px;
           display: flex;
           align-items: center;
           justify-content: center;
           text-indent: 1em;
       }
        .boxOne{
           margin-left: 14%;
           margin-top: 1%;
           text-indent: 1em;
        }
        .boxTwo{
            margin-left: 29%;
            margin-top: 1%;
             text-indent: 2em;
        }
        .boxThree{
            margin-left: 44%;
            margin-top: 1%;
            text-indent: 2em;
        }
        .boxFour{
            margin-left: 59%;
            margin-top: 1%;
        }
       @media screen and (max-width:700px) {
        .box{
           width: 50 px;
           height: 50 px;
           left: 0;
           top: 0;
           cursor: pointer;
           background: rgba(220,220,220,.9);
           position: absolute;
           box-shadow: 5px 5px 5px #ccc;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;

           font-size:10px;
       }
        .boxOne{
           margin-left: 7%!important;
           margin-top: 1%;
           text-indent: 1em;
        }
          #containers{
            margin-top:20%!important;
            margin-left:6%;
      }
    }  
       }
       @media screen and (max-width:960px){
      #containers{
            margin-top:13%!important;
            margin-left:5%!important;
         }
       }
       @media screen and (max-width:700px){
             .boxOne{
           margin-left: 3%;
           margin-top: 1%;
           text-indent: 1em;
        }
        .boxTwo{
            margin-left: 27%;
            margin-top: 1%;
             text-indent: 2em;
        }
        .boxThree{
            margin-left: 47%;
            margin-top: 1%;
            text-indent: 2em;
        }
        .boxFour{
            margin-left: 67%;
            margin-top: 1%;
        }
         .contanerMain{
            margin-top:30%!important;
            margin-left:5%!important;

         }

       }
</style>
</head>
<body>
<div id="container" class="effect mainnav-lg" style="height: 100%; width: 100%">
    <div class="boxed" style=