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，我这里是中国地图

 <script src="../Scripts/echarts/echarts.min.js"></script>

 <script src="../Scripts/echarts/map/js/china.js"></script>

<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>

实现的最终效果

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