百度地图api标注求职信息

2022-03-10 07:23:45

使用帮助

百度地图坐标拾取系统
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; width: 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]);
});

这样,鼠标经过时后才会跳出标签

希望可以使用循环操作,但是前端不熟悉,有会的可以交流一下啊

显示示例:
百度地图api标注求职信息

爬取拉沟

https://www.cnblogs.com/gcxblogs/p/13171772.html
https://www.cnblogs.com/wudb/p/8341036.html

百度地图api标注求职信息

上一篇：海康威视及大华技术SDK C头文件转Delphi Pas文件


下一篇：redis中redis.windows.conf和redis.windows-service.conf文件的区别