阅读模式:

百度地图多标注、弹窗的自定义设置

查看:11872  回复:0  类型:  来源:php自学网  标签 百度地图开发

百度地图设置多个标注,标注图片自定义,点击标注自定义弹出窗口信息,窗口样式信息自定义效果代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图,点击显示窗口自定义信息</title>
</head>
<body>
<div id="allmap" style="width:830px;height:550px;overflow:hidden;">
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=38b7fa7950ce5a308ff49f95ea19402a"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var x='116.419217';
    var y='39.916261';
    baidu(x,y);
    /*自动定位到当前城市*/
    function baidu(x,y){
        if(!x || !y){
            function myFun(result){
                var cityName = result.name;
                map.setCenter(cityName);
                console.log(result)
            }
            var myCity = new BMap.LocalCity();
            myCity.get(myFun);
        }
        map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(x,y), 14);
        /*添加地图控制器*/
        var top_left_navigation = new BMap.NavigationControl();  //左上角,添加默认缩放平移控件
        map.addControl(top_left_navigation);
        //启动鼠标滚动
        map.enableScrollWheelZoom();
        /*$.ajax({
            //可以从后台拉取数据,并把select绑定change事件
        });*/
        var data_info = [[116.417854,39.921988,"地址:北京市东城区王府井大街88号乐天银泰百货八层","王府井","http://zixuephp.net/static/images/logo.png"],
            [116.406605,39.921585,"地址:北京市东城区东华门大街","华门大街","http://zixuephp.net/static/images/logo.png"],
            [116.372648,39.928658,"地址:北京西城区","西大街","http://zixuephp.net/static/images/logo.png"]
        ];
        for(var i=0;i<data_info.length;i++){
            var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(150,100));
            var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]),{icon:myIcon});  // 创建标注
            var sContent =
                    "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+data_info[i][3]+"</h4>" +
                    "<img style='float:right;margin:4px' id='imgDemo' src='"+data_info[i][4]+"' width='139' height='104' title='"+data_info[i][3]+"'/>" +
                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+data_info[i][2]+"</p>" +
                    "</div>";
            map.addOverlay(marker);               // 将标注添加到地图中
            addClickHandler(sContent,marker);
        }
        function addClickHandler(sContent,marker){
            marker.addEventListener("click",function(e){
                openInfo(sContent,e)}
            );
        }
        function openInfo(sContent,e){
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow,point); //开启信息窗口
        }
    }
</script>

效果预览:

分享到:
0 5

*有问题之处烦请在评论中指出非常感谢!
不是我想要的内容,继续搜索:

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
php冒泡排序法   阅读:15157mysql中文分词全文搜索索引讯搜的安装   阅读:7440网站性能优化-页面静态缓存   阅读:5869ajax+php 实现一个简单的在线聊天室功能(附带源码)   阅读:10241php设置cookie为HttpOnly防止XSS攻击   阅读:13504centos 7搭建zabbix3.4   阅读:7081phpexcel 超简单从excel表格一键导入数据到数据库教程   阅读:12795网站性能优化-页面静态缓存   阅读:5869最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:14033javascript点击复制内容   阅读:7464程序员找工作三要素(必看)   阅读:6067把php session 会话保存到redis   阅读:7822linux php7编译安装mongodb扩展   阅读:9504Mysql在大型网站的应用架构演变   阅读:5089php swoole搭建简单的聊天室   阅读:4958centos 7.2 添加php7 的 php-fpm 开机启动   阅读:25694移动端js触摸touch详解(附带案例源码)   阅读:17611解决 nginx 413 request entity too large   阅读:4871最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:14033centos 7 忘记root密码   阅读:5314分享:淘宝技术这十年   阅读:5081霍金24岁博士毕业论文在线预览   阅读:6077centos 7 安装 php-7.1.3   阅读:21240一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:133788面试的时候回去等通知,等电话的真实意思   阅读:25047centos 7 修改系统屏幕分辨率   阅读:47315centos 7 开启网络   阅读:7637web项目高并发量网站解决方案   阅读:5055php翻转字符串   阅读:3980centos 7 安装 samba 服务   阅读:7325centos 7 安装 nginx-1.11.10   阅读:9058移动端js触摸touch详解(附带案例源码)   阅读:17611HTTP 1.1 协议详解   阅读:13711给网站添加一键qq登录的功能   阅读:8049人性漫画:打工与创业的残酷区别   阅读:5349centos7.3安装mongodb3.6   阅读:8143shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:9702TCP的三次握手(建立连接)和四次挥手(关闭连接)   阅读:4237把php session 会话保存到redis   阅读:7822php显示刚刚、几分钟前、几小时前、几天前的函数   阅读:9178纯干货,程序员面试的超实用技巧   阅读:4642解决 nginx 413 request entity too large   阅读:4871centos 7.2 添加php7 的 php-fpm 开机启动   阅读:25694shell发送邮件脚本   阅读:9078TCP的三次握手(建立连接)和四次挥手(关闭连接)   阅读:4237面试的时候和你谈理想,是理想or入坑?   阅读:11357关于PHP程序员技术职业生涯规划   阅读:3265javascript点击复制内容   阅读:7464php 使用 smtp.php 类在线发送邮件功能   阅读:6205小米手机端商城rem适配原理   阅读:7147