Echarts经纬度坐标实现地图定位

一、Echarts下载

echarts官网：http://echarts.apache.org/zh/index.html

echarts下载 https://echarts.apache.org/zh/download.html

我是从github上下载的zip压缩包

下载后，解压，然后将dist文件夹中的内容和map文件夹中的文件放在一个文件夹中，引入到项目中

二、功能实现

项目中的引用

页面代码实现

页面中添加js引用注：如果需要世界地图则引用world.js，我这里是中国地图

<div style="height:450px" id="divMap"></div>
<script>$(document).ready(function () {initMap();});             //地图显示function initMap() {var myChart = echarts.init(document.getElementById('divMap'));$.ajax({url: "../api/securityRisk/getRiskBusinessList",type: 'get',async: false,success: function (res) {if (res.code == 1) {var returnData = res.data;//地图数据处理myChart.setOption({//visualMap: {//    min: 0,//    max: 1500,//    left: 'left',//    top: 'bottom',//    text: ['高', '低'],//取值范围的文字//    inRange: {//        color: ['#e0ffff', '#006edd']//取值范围的颜色//    },//    show: true//图注//},tooltip: {                                   show: true,trigger: 'item',showContent:true,//是否显示提示框浮层，默认显示alwaysShowContent: false,//是否永远显示提示框内容，默认情况下在移出可触发提示框区域后 一定时间 后隐藏，设置为 true 可以保证一直显示提示框内容hideDelay:0,//鼠标移出坐标点时，浮层隐藏的延迟时间，单位为 ms，在 alwaysShowContent 为 true 的时候无效},geo: {map: 'china',roam: false,//是否开启缩放和平移zoom: 1.2,//视角缩放比例label: {normal: {show: false,//是否显示省份名称fontSize: '10',//字体大小color: '#000'//字体颜色},emphasis: { //动态展示的样式fontSize: '10',//字体大小color: '#fff'//字体颜色                                            },},itemStyle: {normal: {borderColor: 'rgba(0, 0, 0, 0.2)',areaColor: '#BBFFFF',//静态时各省份区域颜色},emphasis: {areaColor: '#3c92cf',//鼠标选择区域颜色shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},series: [{ type: 'scatter',coordinateSystem: 'geo',animation: false,//坐标点是否显示动画symbol:'pin',rippleEffect: {brushType: 'fill'// stroke|fill},symbolSize: function (val, params) {//坐标点大小return 30;},data: returnData.map(function (itemOpt) {return {name: itemOpt.srbName,value: [parseFloat(itemOpt.coordY),//经度parseFloat(itemOpt.coordX)//维度],//label: {//    emphasis: {//高亮状态下的样式//        position: 'right',//        show: false//    }//},itemStyle: {//地图区域的多边形normal: {//borderColor: "#07919e",  // 边框颜色//areaColor:"#000",    //  区域颜色//textStyle: {             // 文字颜色//    color: "#fff"//},color:"green",//坐标点颜色shadowBlur: 10,          // 图形阴影的模糊大小shadowOffsetX:10        // 阴影水平方向上的偏移距离。},//emphasis: {//    areaColor: "#000",//    color: "#fff"//}},tooltip: {//仅在 options中最外层的 tooltip.trigger 为 'item'时有效position: 'bottom',//提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效formatter: function (params, ticket, callback) {var strHtml = '<div>';strHtml += '<table class="table">';strHtml += '<tr><td colspan="4" style="text-align:center">工程项目基本信息</td></tr>';strHtml += '<tr><td>项目编号：</td><td>' + itemOpt.srbNO + '</td><td>项目名称：</td><td>' + itemOpt.srbName + '</td></tr>';strHtml += '<tr><td>所属部门：</td><td>' + itemOpt.deptName + '</td></tr>';strHtml += '<tr><td>项目类型：</td><td>' + itemOpt.srbType + '</td><td>合同金额(万元)：</td><td>' + itemOpt.contractMoney + '</td></tr>';strHtml += '<tr><td>业务行业：</td><td>' + itemOpt.trade + '</td><td>业务类型：</td><td>' + itemOpt.category + '</td></tr>';strHtml += '<tr><td>业务等级：</td><td>' + itemOpt.riskLevel + '</td><td>单位负责人：</td><td>' + itemOpt.incharge + '</td></tr>';strHtml += '<tr><td>单位负责人电话：</td><td>' + itemOpt.inchargeTel + '</td><td>项目负责人：</td><td>' + itemOpt.p_Incharge + '</td></tr>';strHtml += '<tr><td>安全负责人：</td><td>' + itemOpt.inCharge_Safety + '</td><td>安全负责人电话：</td><td>' + itemOpt.inChargeTel_Safety + '</td></tr>';strHtml += '<tr><td>甲方单位：</td><td>' + itemOpt.a_Company + '</td><td>施工地点：</td><td>'+itemOpt.srbAddress+'</td></tr>';strHtml += '</table>';strHtml +='</div>'return strHtml;}}};})}]});}}});}
</script>

实现的最终效果

其他相关功能的配置，请参照官方的文档说明

Echarts经纬度坐标实现地图定位相关推荐

地图绘制边界。高德。PPMAP。鼠标点击经纬度坐标。地图图标点点击弹窗窗口。地图图标点点击事件。
边界: == 第一种:绘制边界. 通过绘制多边形的API来绘制边界. 高德API:多边形 Polygon. 矢量图形-覆盖物-教程-地图 JS API | 高德地图API 将关键的边界轮廓经纬度坐标 ...
原始经纬度转百度地图定位并显示地理位置
手机GPS采集的原始经纬度数据往往不能直接在百度地图上显示, 以下代码将原始经纬度数据转成百度经纬度数据标准,并在网页上显示. <!DOCTYPE html> <html> & ...
Excel中的的经纬度坐标在地图上显示
Excel中有这样关于经纬度的数据: 22.56614225 113.9808368 22.68620526 113.9405252 22.57651183 113.957198 22.5648408 ...
无需写代码，在EXCEL表中定位坐标所在地图位置
一前言 EXCEL是我们日常工作学习数据处理的办公软件,操作易上手,几乎人人都会用.EXCEL表格能够处理各种数据,包括经纬度坐标数据,然而EXCEL自带的功能仅能对坐标数据进行增删改等常规的操作. ...
如何引入百度地图和获取精准获取经纬度坐标
引入百度地图百度地图官网开发手册百度地图官网注册用户 -> 控制台 -> 认证用户 -> 创建项目 -> 获取ak密钥 -> 替换js中ak秘钥 < ...
高德地图定位传值经纬度坐标为null,null
高德地图定位传值经纬度坐标为null,null 因为传null导致切割字符串时崩溃,所以要加上非空判断 if (amapLocation.getLatitude() != 0 && a ...
iOS之高德地图定位偏移以及经纬度之间的转换
高德地图.百度地图以及CLLocationManager等地图的定位功能,从而得到的经纬度坐标会有些偏差,比如系统的CLLocationManager定位得到的是世界标准地理坐标(WGS-84).高德 ...
根据经纬度确定行政区域_基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标...
前言近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GP ...
ios 持续获取定位高德地图_【IOS开发】高德地图定位坐标偏差（）
CLLocationManager类可以实时的获得我们位置的经纬度,并且可以通过经纬度在MapView上定位: //创建CLLocationManager对象 CLLocationManager*lo ...
百度地图根据经纬度坐标，显示汽车行驶轨迹
继上一篇:百度地图根据经纬度坐标,显示轨迹又进行了些许优化.将固定点为变为汽车行驶轨迹并添加点位. 上一篇链接:https://blog.csdn.net/qq_36865945/article/d ...

Echarts经纬度坐标实现地图定位

Echarts经纬度坐标实现地图定位相关推荐

最新文章

热门文章