完整版百度地图点击列表定位到对应位置并有交互动画效果demo

1.前言 
将地图嵌入到项目中的需求很多，好吧，我一般都是用的百度地图。那么今天就主要写一个完整的demo。展示一个列表，点击列表的任一内容，在地图上定位到该位置，并有动画效果。来来来，直接上demo 
2.详细流程 
1.引入文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v1.5&ak=AFb5d4d8279a19b2fc3a16d063f26772"></script>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

2.本demo用到两张图片 第一张是头像 sxs.jpg 第二张地图中定位图片 positionBg.png;图片你们自行替换，但是大小不一样，图片不一样，样式要自己微调哦。

3.css样式

　　　　 *{margin:0; padding:0;}
        .cleanfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
        #allmap{width:100%; height:800px}
        .list{position:absolute; left:50px; top:50px;background:#fff; width:240px; border:1px solid #d1d1d1; }
        .list p{width:100%; height:35px; line-height:35px; background-color:#4985d7; color:#fff; font-weight:bold; text-align:center;font-size:14px;}
        ul li{list-style:none;border-bottom:1px dashed #d1d1d1; font:500 12px/30px '微软雅黑'; margin:8px; color:#666; cursor:pointer;}
        ul li:last-child{border-bottom:none;}
        ul li img{width:26px; height:26px; border-radius:13px; float:left; margin-right:8px;}
        ul li a{float:right; color:red;}

4.html内容

　　<div id="allmap"></div>
    <div class="list">
        <p>位置分布</p>
        <ul class="cleanfloat"></ul>
    </div>

5.js代码

       //初始化地图并定位到当前位置
        var map = new BMap.Map("allmap");
        var geolocation = new BMap.Geolocation();

        //游览器会弹出询问是否获取当前位置 ，点击“允许”
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                map.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), 15);
            }
        }, { enableHighAccuracy: true })


        $(function () {
            infoFun();
        })


        var sxs_array = [{ where: '我在北京', id:1, lng: '116.406778', lat: '39.915743', val: '我在天安门' }, { where: '我在上海',id:2, lng: '121.453503', lat: '31.159839', val: '我在上海南站' },
         { where: '我在深圳',id:3, lng: '114.004074', lat: '22.605086', val: '我在深圳野生动物园' }, {where:'我在这里',id:4},{where:'你在哪里',id:5}]


        function infoFun() {
            for (j in sxs_array) {
                if (sxs_array[j].where) {
                    $("ul").append("<li data-id='"+sxs_array[j].id+"' data-lng='" + sxs_array[j].lng + "' data-lat='" + sxs_array[j].lat + "'data-val='" + sxs_array[j].val + "'><img src='../images/sxs.jpg'><span>" + sxs_array[j].where + "</span><a>点我</a></li>");
                    var content = '<div id="'+sxs_array[j].id+'" ><img src="../images/positionBg.png" ><img style="position:absolute;left:7px; top:6px; border-radius:30px;" src="../images/sxs.jpg"></div>';
                    if (sxs_array[j].lng) {
                        var point = new BMap.Point(sxs_array[j].lng, sxs_array[j].lat);
                        var info = new BMap.Label(content, { offset: new BMap.Size(-10, -10), position: point });
                        info.setStyle({
                            backgroundColor: "none",
                            border: "0"
                        });
                        map.addOverlay(info);
                    }
                }
            }
        }

        //点击定位到列表所在位置并放大效果
        $(document).on("click", "ul li", function () {
            var lng = $(this).attr('data-lng');
            var lat = $(this).attr('data-lat');
            var id = $(this).attr('data-id');
            var val = $(this).attr('data-val');
            if (lng == 'undefined' || lat == 'undefined') alert($(this).find("span").eq(0).text());
            else {
                var point = new BMap.Point(lng, lat);
                map.panTo(new BMap.Point(lng, lat));//定位到所点击的位置
                //制作动画效果 图片逐渐变大，并返回原大小；
                $("#allmap label.BMapLabel div#" + id + " img").eq(0).animate({ width: '70px', height: '100px' }, 500);
                $("#allmap label.BMapLabel div#" + id + " img").eq(1).animate({ width: '60px', height: '60px' }, 500);
                $("#allmap label.BMapLabel div#" + id + " img").eq(0).animate({ width: '50px', height: '75px' }, 500);
                $("#allmap label.BMapLabel div#" + id + " img").eq(1).animate({ width: '40px', height: '40px' }, 500);
                //alert(val);弹出你的位置
            }

        })

6.展示效果

3.总结

我靠，竟然花了快3个小时，从有写这个demo的想法，并开始实施，开始找图片，画页面，调试，我承认，我比较追求完美（我呸，看不出来哪里完美）至少样式也是要好好调的好吧，要不然，展现太不好看了，显得我很菜。但是我所写的每一个demo都是自己一个单词一个单词敲的，并不断的调试，虽然很简单的demo，但是我也认真对待。 
如果有什么写的不好的地方，还请多指教，我必定认真改。

转载于:https://www.cnblogs.com/sxs161028/p/7217689.html