此文档作废,因为从拉钩获取的经纬度与百度的坐标系统不一致,导致定位有差别.
使用帮助
百度地图坐标拾取系统
http://api.map.baidu.com/lbsapi/getpoint/index.html
根据地点获取经纬度,或根据经纬度获取地址
百度地图显示多个标注点
https://blog.csdn.net/a497785609/article/details/24009031
标注操作说明文档
http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/mark
异步加载示例:
https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/usage
百度坐标是先经度，再纬度，即Point(lng, lat)。谷歌坐标的顺序恰好相反，是(lat, lng)
示例html保存
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>百度地图API显示多个标注点带提示的代码</title>
<!--css-->
<link href="style/demo.css" rel="stylesheet" type="text/css" />
<!--javascript-->
<script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="scripts/demo.js" type="text/javascript"></script>
</head>
<body>
<div class="demo_main">
<fieldset class="demo_title">
百度地图API显示多个标注点带提示的代码
</fieldset>
<fieldset class="demo_content">
<div style="min-height: 900px; 100%;" id="map">
</div>
<script type="text/javascript">
var markerArr = [
{title: "python开发工程师", point: "116.309,39.9634", company: "字节跳动dd", workYear: "1-3年", salary: "20k-35k"},
{title: "高级python工程师(J11346)", point: "116.351,40.0475", company: "明略科技集团", workYear: "3-5年", salary: "20k-30k"},
{title: "Python开发工程师-安全方向", point: "116.329,39.9718", company: "字节跳动", workYear: "1-3年", salary: "20k-40k"},
{title: "Python运维开发工程师", point: "116.433,39.9262", company: "中通服", workYear: "3-5年", salary: "12k-20k"},
{title: "Python教学导师(J12894)", point: "116.343,40.0602", company: "传智播客", workYear: "3-5年", salary: "15k-25k"},
{title: "python工程师", point: "116.513,39.7918", company: "生仝智能", workYear: "不限", salary: "14k-28k"},
{title: "python开发工程师", point: "116.312,39.9818", company: "缔联科技", workYear: "3-5年", salary: "15k-20k"},
{title: "算法工程师（Python）", point: "116.331,39.9958", company: "明略科技集团", workYear: "3-5年", salary: "25k-40k"},
{title: "Python开发工程师", point: "116.451,39.9151", company: "游道易", workYear: "3-5年", salary: "15k-25k"},
{title: "Python工程师", point: "116.352,39.9776", company: "音娱时光", workYear: "3-5年", salary: "20k-30k"},
{title: "Python工程师", point: "116.293,40.0477", company: "贝壳", workYear: "3-5年", salary: "20k-40k"},
{title: "Python开发工程师", point: "116.329,39.9953", company: "清交科技", workYear: "3-5年", salary: "20k-40k"},
{title: "python开发工程师", point: "116.451,39.933", company: "云势软件", workYear: "3-5年", salary: "18k-25k"},
{title: "Python开发工程师", point: "116.231,40.2207", company: "音悦荚", workYear: "1-3年", salary: "20k-30k"},
{title: "Python开发工程师", point: "116.478,39.9328", company: "ZingFront智线", workYear: "1-3年", salary: "12k-20k"},
{title: "python开发", point: "116.44,40.0321", company: "博乐科技", workYear: "不限", salary: "12k-24k"},
{title: "Python Web开发工程师", point: "116.312,39.9818", company: "缔联科技", workYear: "3-5年", salary: "15k-20k"},
{title: "python开发", point: "116.463,39.9076", company: "时趣social-touch", workYear: "3-5年", salary: "10k-20k"},
{title: "Python开发工程师", point: "116.537,39.9315", company: "猎户星空", workYear: "3-5年", salary: "18k-35k"},
{title: "Python工程师", point: "116.289,39.961", company: "拉勾猎头", workYear: "3-5年", salary: "15k-25k"},
{title: "python工程师", point: "116.604,39.9245", company: "窄门集团", workYear: "3-5年", salary: "15k-25k"},
{title: "Python开发工程师", point: "116.273,40.0434", company: "微创软件", workYear: "1-3年", salary: "14k-17k"},
{title: "Python开发工程师", point: "116.31,39.9794", company: "微创软件", workYear: "1-3年", salary: "10k-15k"},
{title: "python开发工程师", point: "116.475,40.022", company: "小叶子The ONE", workYear: "3-5年", salary: "15k-30k"},
{title: "Python开发工程师", point: "116.184,40.0705", company: "建信金科", workYear: "5-10年", salary: "25k-50k"},
{title: "Python开发工程师", point: "116.441,39.9092", company: "信永中和", workYear: "3-5年", salary: "15k-25k"},
{title: "Python 后端开发（北京）", point: "116.455,39.9204", company: "蜻蜓FM", workYear: "1-3年", salary: "18k-36k"},
{title: "python开发工程师", point: "116.452,39.9197", company: "Stratifyd", workYear: "3-5年", salary: "15k-25k"},
{title: "高级后端开发工程师（python)", point: "116.369,39.9804", company: "GeneDock", workYear: "5-10年", salary: "20k-40k"},
{title: "Python游戏研发", point: "116.329,39.9719", company: "西山居游戏", workYear: "3-5年", salary: "15k-30k"},
{title: "python开发工程师", point: "116.288,40.0468", company: "Flow++", workYear: "3-5年", salary: "15k-30k"},
{title: "Python开发工程师", point: "116.424,39.9489", company: "嘉和美康", workYear: "5-10年", salary: "15k-25k"},
{title: "python开发", point: "116.339,39.9924", company: "iHandy", workYear: "3-5年", salary: "20k-35k"},
{title: "python开发工程师", point: "116.328,39.9932", company: "人人贷", workYear: "3-5年", salary: "15k-25k"},
{title: "高级python开发工程师", point: "116.352,39.9776", company: "音娱时光", workYear: "5-10年", salary: "25k-45k"},
{title: "python开发工程师/GO开发工程师", point: "116.334,39.9943", company: "必示科技", workYear: "1-3年", salary: "15k-30k"},
{title: "python研发工程师", point: "116.311,39.9768", company: "融360", workYear: "3-5年", salary: "20k-30k"},
{title: "高级Python开发工程师", point: "116.183,40.0717", company: "建信金科", workYear: "3-5年", salary: "20k-40k"},
{title: "少儿编程老师-python.java.c++", point: "116.556,39.7777", company: "达内集团", workYear: "不限", salary: "7k-12k"}
];
function map_init() {
var map = new BMap.Map("map"); // 创建Map实例
var point = new BMap.Point(116.402257,39.916927); //地图中心点，北京市
map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(true); //启用滚轮放大缩小
//向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrlOve);
//向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
var point = new Array(); //存放标注点经纬信息的数组116.30797,40.014918
var marker = new Array(); //存放标注点对象的数组
var info = new Array(); //存放提示信息窗口对象的数组
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].point.split(",")[0]; //
var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
map.addOverlay(marker[i]);
marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });
marker[i].setLabel(label);
info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].title + "</br>薪资:" + markerArr[i].salary + "</br>公司:" + markerArr[i].company + "</br>工作年限:" + markerArr[i].workYear +"</br></p>"); // 创建信息窗口对象
}
marker[0].addEventListener("mouseover", function () {
this.openInfoWindow(info[0]);
});
marker[1].addEventListener("mouseover", function () {
this.openInfoWindow(info[1]);
});
marker[2].addEventListener("mouseover", function () {
this.openInfoWindow(info[2]);
});
marker[3].addEventListener("mouseover", function () {
this.openInfoWindow(info[3]);
});
marker[4].addEventListener("mouseover", function () {
this.openInfoWindow(info[4]);
});
marker[5].addEventListener("mouseover", function () {
this.openInfoWindow(info[5]);
});
marker[6].addEventListener("mouseover", function () {
this.openInfoWindow(info[6]);
});
marker[7].addEventListener("mouseover", function () {
this.openInfoWindow(info[7]);
});
marker[8].addEventListener("mouseover", function () {
this.openInfoWindow(info[8]);
});
marker[9].addEventListener("mouseover", function () {
this.openInfoWindow(info[9]);
});
marker[10].addEventListener("mouseover", function () {
this.openInfoWindow(info[10]);
});
marker[11].addEventListener("mouseover", function () {
this.openInfoWindow(info[11]);
});
marker[12].addEventListener("mouseover", function () {
this.openInfoWindow(info[12]);
});
marker[13].addEventListener("mouseover", function () {
this.openInfoWindow(info[13]);
});
marker[14].addEventListener("mouseover", function () {
this.openInfoWindow(info[14]);
});
marker[15].addEventListener("mouseover", function () {
this.openInfoWindow(info[15]);
});
marker[16].addEventListener("mouseover", function () {
this.openInfoWindow(info[16]);
});
marker[17].addEventListener("mouseover", function () {
this.openInfoWindow(info[17]);
});
marker[18].addEventListener("mouseover",function () {
this.openInfoWindow(info[18]);
});
// // for (var i = 0; i < markerArr.length; i++) {
// for (var i = 0; i < 9 ; i++) {
// console.log(info[i]);
// marker[i].addEventListener("mouseover",function () {
// this.openInfoWindow(info[i]);
// // var win = marker[i].openInfoWindow(info[i]);
// // console.log(info[i]);
// // marker[i].addEventListener("mouseover", win());
// }
}
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
document.body.appendChild(load);
}
window.onload = map_load;
</script>
</fieldset>
</div>
</body>
</html>
每添加一个坐标,都需要添加一个
marker[8].addEventListener("mouseover", function () {
this.openInfoWindow(info[8]);
});这样,鼠标经过时后才会跳出标签
希望可以使用循环操作,但是前端不熟悉,有会的可以交流一下啊
百度的没有研究透,但是高德的可以用
显示示例:
爬取拉沟
https://www.cnblogs.com/gcxblogs/p/13171772.html
https://www.cnblogs.com/wudb/p/8341036.html