[JavaScript] 利用高德地图制作武汉区域公司分布

joceann · 发表于 2021-4-9 22:18

因为最近要买房, 所以想看一下武汉的公司(主要是互联网)分布在那些地方.

公司数据来源boss直聘, 采用selenium抓取, 相对简单略过
地图部分为高德地图API实现, html+javascript

实现公司地图分布展示, 可以选择展示的种类包括: 所有公司, ABC轮融资, D轮级以上, 不需要融资, 未融资
所有公司效果:

ABC轮融资公司:

ABC

直接上代码
html部分:

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my-map</title>
    <style>
        .input-card{
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border-radius: .25rem;
            width: 29rem;
            border-width: 0;
            border-radius: 0.4rem;
            box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 0.75rem 1.25rem;
            line-height: 2
        }

        .input-card .btn{
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            background-color: transparent;
            background-image: none;
            color: #25A5F7;
            border-color: #25A5F7;
            padding: .25rem .5rem;
            line-height: 1.5;
            border-radius: 1rem;
            -webkit-appearance: button;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="container" style="width: 100%; height: 789px"></div>
<div class="input-card">
    <label style="color:grey">点标记操作</label>
    <div class="input-item">
        <input type="button" class="btn" value="所有">
        <input type="button" class="btn" value="ABC轮">
        <input type="button" class="btn" value="D轮及以上">
        <input type="button" class="btn" value="不需要融资">
        <input type="button" class="btn" value="已上市">
        <input type="button" class="btn" value="未融资">
    </div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=36ba24f294c2bdf472bc20a8a2d388c8"></script>
<script src="amap.js"></script>
</body>
</html>

javascript部分:

[JavaScript] 纯文本查看 复制代码

var map = new AMap.Map('container', {
    zoom:11,//级别
    center: [114.394661,30.499192],//中心点坐标
    resizeEnable: true
});

let VALUE_MAP = {
    '购物服务': {
        '商场': {
            '购物中心': '*'
        }
    },
    '购物服务': {
        '超级市场': '*'
    },
    '体育休闲服务': {
        '影剧院': '*'
    },
    '住宿服务': {
        '宾馆酒店': '*'
    },
    '商务住宅': {
        '楼宇': '*',
        '产业园区': '*'
    },
    '科教文化服务': '*',
    '公司企业': {
        '公司企业': '*',
        '公司': '*'
    }
}

let ALL_COMS_ARR = ["今日头条", "北京尚德机构", "璇瑞智佳装饰", "德邦快递", "京东物流-华中区域", "作业帮", "有家便利店", "掌门教育", "武汉链家", "腾讯", "Lianjia.链家", "贝壳找房武汉站", "武汉市万科物业", "华为技术有限公司", "斑马AI课", "VIPKID", "华为", "好未来", "豌豆思维", "链家宏业房地产", "曼迪匹艾", "益丰大药房", "火花思维", "武汉美的空调", "腾讯教育科技", "良品铺子", "烽火通信", "乐信集团", "小红书", "海底捞火锅", "百胜餐饮", "朴朴", "高顿教育集团", "子时装饰工程有限公司", "一起教育科技", "北京字节跳动", "跟谁学-高途课堂", "小药药", "阿里巴巴集团", "美团", "斗鱼", "万御安防", "软通动力信息技术集团", "21世纪不动产", "顺丰", "正邦集团", "常相伴", "饿了么", "武汉联影", "盒马鲜生", "九州通", "软通动力", "研博智学信息科技", "武汉天童美语", "武汉天喻信息", "盛和才智", "兴图新科", "咿呀口腔", "中软国际", "掌咖教育", "迈欧体育", "纬创软件", "尚德机构", "51Talk无忧英语", "奥尔德桑餐饮服务", "易佰网络", "武汉尊宝比萨", "有家实业", "小米", "精锐教育", "联友科技", "多比特", "恒信汽车集团", "怪兽充电", "美年大健康", "太二酸菜鱼", "朴胜教育", "数字政通", "武汉天马微电子", "海康威视武汉研发中心", "武汉佰钧成技术", "飞速创新", "lianjia", "绿盟科技", "北京微海管理咨询", "上海小牛互娱", "轻轻教育", "壹米滴答", "武汉百捷", "客如云", "漫汉文化传媒有限公司", "法本", "水滴公司", "福禄网络", "核桃编程", "武汉游戏群", "招商银行信用卡中心", "多益网络", "伴鱼", "顺丰速运", "金山办公软件", "卓越教育", "明德生物", "武汉巨人教育", "快手", "武汉新东方", "BOSS直聘", "十荟团", "吉家明瑞", "中移集成", "红杉树装饰公司", "拓维云创", "美格科技", "科思沃斯职业培训学校", "天津市邮电设计院司", "黑桃互动", "深圳市小满科技", "链家", "美味不用等", "闪送", "货拉拉", "北森云计算", "能链集团", "天地汇", "悦客企业", "武汉市世纪万家房地产", "绽梦文化", "上海发网", "纷享销客", "盖雅工场", "新精武", "益泰药业", "江西飞尚科技有限...", "数字引擎", "文华在线教育", "京店云", "锐志博雅", "比目鱼网络科技", "武汉狼窝科技", "美菜网", "魔方公寓", "华福证券", "美餐网", "微品致远", "鼎业环保", "众盟科技", "启思教育", "科发源", "国盛荣科", "寓乐湾", "北京朗杰", "万象春天实业集团", "德佑", "有孚众创集团", "湖北浩信药业", "格灵深瞳", "山河匠人广告", "追青舞蹈艺术中心", "宝顺行房地产咨询", "功夫体育文化", "Canva", "好房缘房地产", "吉达纵横商贸", "微步在线", "宜尚智能", "华夏星光", "明日数据", "世纪房行", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData"]
let ABC_COMS = ['万御安防', '朴朴', '武汉巨人教育', 'Lianjia.链家', '豌豆思维', '核桃编程', '伴鱼', '十荟团']
let D_MORE_COMS = ["今日头条", "作业帮", "掌门教育", "斑马AI课", "VIPKID", "火花思维", "小红书", "高顿教育集团", "北京字节跳动", "小药药", "掌咖教育", "易佰网络", "北京微海管理咨询", "轻轻教育", "壹米滴答", "水滴公司", "BOSS直聘", "美格科技", "科思沃斯职业培训学校", "天津市邮电设计院司", "黑桃互动", "深圳市小满科技", "链家", "美味不用等", "闪送", "货拉拉", "北森云计算", "能链集团", "天地汇", "悦客企业", "武汉市世纪万家房地产", "绽梦文化", "上海发网", "纷享销客", "盖雅工场", "新精武", "益泰药业", "江西飞尚科技有限...", "数字引擎", "文华在线教育", "京店云", "锐志博雅", "比目鱼网络科技", "武汉狼窝科技", "美菜网", "魔方公寓", "华福证券", "美餐网", "微品致远", "鼎业环保", "众盟科技", "启思教育", "科发源", "国盛荣科", "寓乐湾", "北京朗杰", "万象春天实业集团", "德佑", "有孚众创集团", "湖北浩信药业", "格灵深瞳", "山河匠人广告", "追青舞蹈艺术中心", "宝顺行房地产咨询", "功夫体育文化", "Canva", "好房缘房地产", "吉达纵横商贸", "微步在线", "宜尚智能", "华夏星光", "明日数据", "世纪房行", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData", "世纪房行", "奓山南星口腔", "武汉辉熠汽车服务", "TalkingData"]
let CLEAR_COMS = ["璇瑞智佳装饰", "武汉市万科物业", "华为技术有限公司", "华为", "曼迪匹艾", "腾讯教育科技", "子时装饰工程有限公司", "常相伴", "饿了么", "武汉联影", "盒马鲜生", "研博智学信息科技", "武汉天童美语", "盛和才智", "咿呀口腔", "迈欧体育", "联友科技", "多比特", "恒信汽车集团", "朴胜教育", "武汉佰钧成技术", "飞速创新", "lianjia", "上海小牛互娱", "武汉百捷", "漫汉文化传媒有限公司", "多益网络", "中移集成", "红杉树装饰公司"]
let ON_MARKET_COMS = ["北京尚德机构", "德邦快递", "京东物流-华中区域", "有家便利店", "武汉链家", "腾讯", "贝壳找房武汉站", "好未来", "链家宏业房地产", "益丰大药房", "武汉美的空调", "良品铺子", "烽火通信", "乐信集团", "海底捞火锅", "百胜餐饮", "一起教育科技", "跟谁学-高途课堂", "阿里巴巴集团", "美团", "斗鱼", "软通动力信息技术集团", "21世纪不动产", "顺丰", "正邦集团", "九州通", "软通动力", "武汉天喻信息", "兴图新科", "中软国际", "纬创软件", "尚德机构", "51Talk无忧英语", "小米", "精锐教育", "怪兽充电", "美年大健康", "太二酸菜鱼", "数字政通", "武汉天马微电子", "海康威视武汉研发中心", "绿盟科技", "客如云", "法本", "福禄网络", "招商银行信用卡中心", "顺丰速运", "金山办公软件", "卓越教育", "明德生物", "快手", "武汉新东方", "拓维云创"]
let NOT_YET_COMS = ["奥尔德桑餐饮服务", "武汉尊宝比萨", "有家实业", "武汉游戏群", "吉家明瑞"]

let markers = [];

//关键字查询
function search(placeSearch, com) {
    placeSearch.search(com, function(status, result) {
        if ('complete' == status) {
            result.poiList.pois.forEach(function (item) {
                let info;
                let loc;
                let types = item.type.split(';')
                let firstLevel = VALUE_MAP[types[0]]
                if (firstLevel) {
                    if (firstLevel == '*') {
                        info = item.address + '\n' + item.type + '\n' + item.name;
                        loc = item.location.lat + ', ' + item.location.lng
                    } else {
                        let secondLevel = firstLevel[types[1]]
                        if (secondLevel) {
                            if (secondLevel == '*') {
                                info = item.address + '\n' + item.type + '\n' + item.name;
                                loc = item.location.lat + ', ' + item.location.lng
                            } else {
                                let thirdLevel = secondLevel[types[2]]
                                if (thirdLevel == '*') {
                                    info = item.address + '\n' + item.type + '\n' + item.name;
                                    loc = item.location.lng + ', ' + item.location.lat
                                }
                            }
                        }
                    }
                }
                console.log(info + ';' + loc);
                let marker = new AMap.Marker({
                    position: new AMap.LngLat(loc.split(',')[1], loc.split(',')[0]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    title: info
                });
                markers.push(marker)
                map.add(markers)
            })

        }
    });
}


function updateMarker(type) {
    map.remove(markers)
    markers = [];

    AMap.service(["AMap.PlaceSearch"], function() {
        let placeSearch = new AMap.PlaceSearch({
            city: "420100", // 兴趣点城市
            citylimit: true  //是否强制限制在设置的城市内搜索
        });

        if ('all' == type) {
            ALL_COMS_ARR.forEach(function (com) {
                search(placeSearch, com)
            });
        } else if ('abc' == type) {
            ABC_COMS.forEach(function (com) {
                search(placeSearch, com)
            });
        } else if ("d_more" == type) {
            D_MORE_COMS.forEach(function (com) {
                search(placeSearch, com)
            });
        } else if ("d_more" == type) {
            D_MORE_COMS.forEach(function (com) {
                search(placeSearch, com)
            });
        } else if ('clear' == type) {
            CLEAR_COMS.forEach(function (com) {
                search(placeSearch, com)
            });
        } else if ("on_market" == type) {
            ON_MARKET_COMS.forEach(function (com) {
                search(placeSearch, com)
            });
        } else if ("not_yet" == type) {
            NOT_YET_COMS.forEach(function (com) {
                search(placeSearch, com)
            });
        }

    });
}

cherrypi · 发表于 2021-4-9 22:29

原来武汉这么多互联网公司

Eaglecad · 发表于 2021-4-10 00:43

厉害呀，观摩一下

帐号		自动登录	找回密码
密码			注册[Register]

[Java 原创] [JavaScript] 利用高德地图制作武汉区域公司分布

免费评分