切换模式
武汉互联网公司分布图代码实现
jocean
anyway
公司数据来源boss直聘selenium抓取, 地图采用高德地图API
可分别显示所有公司, ABC轮融资, D轮级以上, 不需要融资, 未融资几个分类
效果图如下
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" onclick="updateMarker('all')" value="所有">
<input type="button" class="btn" onclick="updateMarker('abc')" value="ABC轮">
<input type="button" class="btn" onclick="updateMarker('d_more')" value="D轮及以上">
<input type="button" class="btn" onclick="updateMarker('clear')" value="不需要融资">
<input type="button" class="btn" onclick="updateMarker('on_market')" value="已上市">
<input type="button" class="btn" onclick="updateMarker('not_yet')" value="未融资">
</div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=36ba24f294c2bdf472bc20a8a2d388c8"></script>
<script src="amap.js"></script>
</body>
</html>js:
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)
});
}
});
}
发布于 2021-04-09 22:02
武汉
互联网
买房