基于Thinkphp+MySQL+Juery开发的地图显示

        最初打算通过ip记录,然后在地图上显示位置。百度地图的秘钥总提示有误。就自己基于框架写了两个demo测试。

        后面的,我用到了公司的项目里。当然,这只是个小demo。网上的有很多原生PHP写的,并且CSDN有点坑,下载什么都要钱。所以,只有自己动手丰衣足食了。不说了,上代码!

create table if not exists crm_map
(
    id int(11) not null auto_increment,
    province varchar(20) not null,
    active int(10) NOT NULL DEFAULT '0',
    primary key (id)
)engine=MyISAM  default charset=utf8;

INSERT INTO crm_map (id, province, active) VALUES
(1, "澳门", 120),
(2, '香港', 1020),
(3, '台湾', 2560),
(4, '广东', 11321),
(5, '广西', 3123),
(6, '海南', 851),
(7, '云南', 651),
(8, '福建', 1352),
(9, '江西', 810),
(10, '湖南', 2362),
(11, '贵州', 281),
(12, '浙江', 3865),
(13, '安徽', 671),
(14, '上海', 12586),
(15, '江苏', 9865),
(16, '湖北', 361),
(17, '西藏', 121),
(18, '青海', 21),
(19, '甘肃', 321),
(20, '新疆', 158),
(21, '陕西', 2561),
(22, '河南', 1246),
(23, '山西', 781),
(24, '山东', 5415),
(25, '河北', 1562),
(26, '天津', 691),
(27, '北京', 9891),
(28, '宁夏', 236),
(29, '内蒙古', 863),
(30, '辽宁', 794),
(31, '吉林', 892),
(32, '黑龙江', 1851),
(33, '重庆', 3158),
(34, '四川', 4214);

        这里的active仅为测试数据。后面需要的可以清空active,用ip访问自增即可。

图片.png

        数据库配置。

namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
    public function index()
    {
        $this->display();
    }
    public function putdata()
    {
        $model = M('Map');
        // select active from mapdata order by id asc
        $data = $model->field('active')->order('id asc')->select();
        foreach($data as $k => $v)
        {
            $mapdata[$k] = $v['active'];
        }
        // $this->ajaxReturn($mapdata);
        echo json_encode($mapdata);
        exit;
    }
}

        为Index控制器,最开始,我准备用AjaxReturn返回数据。但是地图无法显示。用了这一招。

        下面就是视图了。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演示:PHP+Mysql+jQuery实现地图区域数据统计-展示数据</title>
<meta name="keywords" content="地图数据统计">
<style type="text/css">
.demo{
    width:760px; 
    height:520px;
    margin:40px auto 0 auto; 
    font-size:14px;
 }
#map{width:600px; margin:10px auto}
#label{
    width:200px; 
    height:25px; 
    line-height:25px; 
    margin:10px auto
}
#label span{height:25px; width:25px; display:block; float:left; text-align:center}

#tip{position:absolute; 
    width:180px; border:1px solid #d3d3d3; 
    background:#fff;display:none;
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    overflow:hidden; 
    border-radius:5px;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
    box-shadow:1px 1px 2px rgba(0,0,0,.2);
}
#tip h4{height:28px; 
    line-height:28px; 
    padding-left:6px;
    background:#f0f0f0
}
#tip p{line-height:24px; padding:2px 4px}
</style>
<script type="text/javascript" src="__PUBLIC__/Home/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/Home/raphael.js"></script>
<script type="text/javascript" src="__PUBLIC__/Home/chinamapPath.js"></script>
</head>
<body>
<div id="main">
   <div class="demo">
           <div id="label">
            <span>高</span>
            <span style="background-color:#005c86"></span>
            <span style="background-color:#0084be"></span>
            <span style="background-color:#00a2e9"></span>
            <span style="background-color:#3fbeef"></span>
            <span style="background-color:#97d6f5"></span>
            <span style="background-color:#d7eef8"></span>
            <span>低</span>
        </div>
           <div id="map"></div>
           <div id="tip"></div>
   </div>
</div>

<script type="text/javascript">
$(function(){
    $.get("{:U("Index/putdata")}",function(json){
    // $.ajax({
    //     type: 'get',
    //     url: '{:U("Index/putdata")}',
    //     dataType: 'json',
    //     success: function(json){
            var data = string2Array(json);
            var flag;
            var arr = new Array();
            for(var i=0;i<data.length;i++){
                var d = data[i];
                if(d<100){
                    flag = 0;
                }else if(d>=100 && d<500){
                    flag = 1;
                }else if(d>=500 && d<2000){
                    flag = 2;
                }else if(d>=2000 && d<5000){
                    flag = 3;
                }else if(d>=5000 && d<10000){
                    flag = 4;
                }else{
                    flag = 5;
                }
                arr.push(flag);
            }
            var colors = ["#d7eef8","#97d6f5","#3fbeef","#00a2e9","#0084be","#005c86"];
            var R = Raphael("map", 600, 500);

            //调用绘制地图方法
            paintMap(R);


            var i=0;
            for (var state in china) {
                china[state]['path'].color = Raphael.getColor(0.9);
                (function (st, state) {
                    var prodata = data[i];
                    var fillcolor = colors[arr[i]];
                    st.attr({fill:fillcolor});//填充背景色
                    xOffset = 70;
                    yOffset = 180;
                    st.hover(function(e){
                        st.animate({fill: "#fdd", stroke: "#eee"}, 500);
                        R.safari();
                        $("#tip").css({"top":(e.clientY-xOffset)+"px","left":(e.clientX-yOffset)+"px"}).fadeIn("fast").html("<h4>"+china[state]['name']+"</h4><p>活跃用户数:"+prodata+"</p>");
                    },function(){
                        st.animate({fill: fillcolor, stroke: "#eee"}, 500);
                        R.safari();
                        $("#tip").hide();
                    });

                    st.mousemove(function(e){
                        $("#tip").css({"top":(e.clientY-xOffset)+"px","left":(e.clientX-yOffset)+"px"});
                        R.safari();
                    });

                 })(china[state]['path'], state);
                 i++;
            }
    //     },
    // });
    });
});

function string2Array(string) {
    eval("var result = " + decodeURI(string));
    return result;
}
</script>
</body>
</html>

        写到这里,有趣的是,用$.ajax可以获取数据,但是。不能得到想到的地图。还是采用第一种方法。

        结果,奇迹出现了。

        图片.png

        这是我结合项目写的demo。效果一样的。


本文链接:https://itarvin.com/detail-8.aspx


  • [blockquote][F14] 有点看不懂哦,希望下次写的简单易懂一点![/blockquote][blockquote][F1] 好羞射,文章真的好赞啊,顶博主![/blockquote][blockquote]签到成功!签到时间:下午5:09:39,每日打卡,生活更精彩哦~[/blockquote]

登录或者注册以便发表评论

登录

注册