1. <dd id="uoqjr"></dd>
        头像

        百度地图显示10个以上的标注点实例【原创

        来源:http://www.zmam.tw/php/3284 24***4k 2017-12-06 21:15浏览(4049) 收藏

        不必再为百度地图api限制标注点的数量数量而烦恼了,几行js代码轻松搞定!
        百度地图显示10个以上的标注点实例
        分类:PHP > 统计图+地图 难易:中级

        程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ3453293792直接充值

        查看演示 下载资源: 2 下载资源 下载火币: 20 火币
        解压文件直接打开即可
        var doch = $(document).height() - 95;
        var taddress = '';
        taddress = '银川市';
        var map = new BMap.Map("map-container");//在container容器中创建一个地图,参数container为div的id属性;
        map.centerAndZoom(taddress, 5);                //将point移到浏览器?#34892;模?#24182;且地图大小调整为15;
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.MapTypeControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
        map.enableKeyboard();//启动键盘操作地图
        setTimeout(function() {
            $.each([{"short_name": "\u6807\u6CE8\u70B9", "address": "\u4E91\u5357\u7701\u6606\u660E\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u5E7F\u4E1C\u7701\u5E7F\u5DDE\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u798F\u5EFA\u7701\u798F\u5DDE\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u53F0\u6E7E\u7701\u53F0\u5317\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u56DB\u5DDD\u7701\u6210\u90FD\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u65B0\u7586\u4E4C\u9C81\u6728\u9F50"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u91CD\u5E86\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u5170\u5DDE\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u94F6\u5DDD\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u90D1\u5DDE\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u5357\u4EAC\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u6D4E\u5357\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u5317\u4EAC\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u54C8\u5C14\u6EE8\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u6C88\u9633\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u547C\u548C\u6D69\u7279\u5E02"}, {"short_name": "\u6807\u6CE8\u70B9", "address": "\u5927\u8FDE\u5E02"}], function(index, item) {
                var iadd = item.address.substr(0, 32);
                $.getJSON('http://api.map.baidu.com/geocoder/v2/?address=' + iadd + '&output=json&ak=DYaq3yBlOfNVjYmedl31HEbU&callback=?',
                        function(data) {
                            var lng = data.result.location.lng;
                            var lat = data.result.location.lat;
                            var point = new BMap.Point(lng, lat);
                            var myIcon = new BMap.Icon("/Front/Public/images/MarkerIcon.png?v=20161129", new BMap.Size(10, 10), {
                                offset: new BMap.Size(5, 10), // 指定定位位置  
                                imageOffset: new BMap.Size(0, 0) // 设置图片偏移  
                            });
        
                            var aaa = new BMap.Marker(point, {icon: myIcon});
                            map.addOverlay(aaa);
                            aaa.setZIndex('1');
                            var bbb = new BMap.Label(item.short_name, {offset: new BMap.Size(-24, -40)});
                            bbb.setStyle({height: '46px', color: '#fff', lineHeight: '46px', borderRadius: '26px', padding: '0px 6px', zIndex: '-1', background: '#b4a078', background:'rgba(180,160,120,0.9)'});
                            aaa.setLabel(bbb);
                        }
                );
            })
        }, 500)
        • 头像 38楼
          05-01 07:27
          hm***10
          这个很不错,先留着慢慢看
        • 头像 37楼
          04-25 08:56
          yu***赫赫
          下载下来看看,,看起来还不错。
        • 头像 36楼
          03-13 15:29
          ***
          真是啥都有啊 最近正在照这个东西
        • 头像 35楼
          02-23 20:22
          He***ck
          这个就很不错了看起来很实用的样子
        • 头像 34楼
          02-05 10:18
          ha***xi
          这个有用的到的地方,下载下来看看
        • 头像 33楼
          02-05 08:30
          仿***者
          感觉好溜溜溜啊 正是我这几天需要的 要学习
        • 头像 32楼
          01-29 14:50
          u_***78
          有空了学学他调用百度地图
        • 头像 31楼
          01-26 11:03
          无***语
          百度地图还可以这么玩啊,膜拜大神。
        • 头像 30楼
          01-21 22:12
          西***侠
          看来很好用,下载下来看看
        • 头像 29楼
          01-16 11:14
          xi***ng
          这个是不是调取定位的,不过看样子好好用的样子,我看看下载
        1 2
        江西11选五开奖记录