• 百度地图API JavaScript显示人员分布信息


    效果图贴下:

    js代码贴下:

    <body>
    <div id="div-map"></div>
    </body>
    </html>
    <script type="text/javascript">
    $(function(){
    // 百度地图API功能
    var map = new BMap.Map("div-map");
    map.centerAndZoom(new BMap.Point(106.530635013,34.640738612), 6);
    map.enableScrollWheelZoom();
    refreshData();
    setInterval(refreshData,600000);
    function refreshData(){
    $.ajax({
    type : "POST",
    async : false, //同步请求
    url : "${ctx}/mapData",
    timeout:5000,
    success:function(res){
    var data = JSON.parse(res);
    map.clearOverlays();
    var nContent = "此会员为未实名会员!";
    var content="";
    var opts = {
    200,
    height: 120,
    title: "<strong style="font-size:20px;font-weight:bold">会员信息</strong>",
    enableMessage: true,
    message: ""
    }
    if (data.obj && data.obj.list.length > 0) {
    for(var idx = 0;idx<data.obj.list.length;idx++) {
    var pt = new BMap.Point(data.obj.list[idx].lng, data.obj.list[idx].lat);
    var marker = new BMap.Marker(pt); // 创建标注
    var sContent = '<div>';
    sContent += ' <img style="float:left;margin:4px" id="imgDemo" src="' + data.obj.list[idx].memberHeadImgUrl + '" width="80" height="80" title="头像"/>';
    sContent += ' <h4 style="margin:0 0 5px 0;padding:0.2em 0">' + data.obj.list[idx].memberRealname + '</h4>';
    sContent += ' <p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">' + data.obj.list[idx].memberMobile + '</p>';
    sContent += ' </div>';
    if (data.obj.list[idx].memberMobile==null) {
    content=nContent;
    } else {
    content=sContent;
    }
    map.addOverlay(marker);
    addClickHandler(content,marker);
    function addClickHandler(content,marker){
    marker.addEventListener("click",function(){
    var infoWindow = new BMap.InfoWindow(content,opts);
    this.openInfoWindow(infoWindow,pt);
    //图片加载完毕重绘infowindow
    document.getElementById('imgDemo').onload = function (){
    infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
    }
    });
    }
    }
    }
    }
    });
    }
    });
    </script>

    有兴趣的可以参考百度API文档学习:http://developer.baidu.com/map/jsdemo.htm

  • 相关阅读:
    gitlab 本地 定时备份
    centos 7 部署 汉化版 gitlab
    ELK开机启动 service文件内容
    通过 kms 激活 office 2016
    让 kibana 后台启动的方案
    centos7 yum 安装 redis
    域账户登录时提示“你的账户配置不允许使用这台电脑。请试一下其他电脑” 解决方案
    gitlab 接入 openldap、AD
    VS访问不到TFS、VS连接TFS报TF30063
    php--纯静态和伪静态的区别与关系
  • 原文地址:https://www.cnblogs.com/ljh-/p/9228632.html
Copyright © 2020-2023  润新知