<style>
    .geo-title {
        font-size: 1.3rem;
        font-weight: bold;
        margin-top: 0.5rem;
        padding: 0.3rem 0;
    }


    #r-result {
        background-color: #FFF;
        padding: 5px;
        font-size: 14px;
        border-radius: 5px;
        box-shadow: 3px 3px 3px lightgray;
    }

    #searchResultPanel {
        border: 1px solid #C0C0C0;
        width: 200px;
        height: auto;
        display: none;
    }

    #suggestId {
        width: 200px;
        border: none;
        border-bottom: 1px solid lightgray;
        margin-left: 5px;
    }

    .tangram-suggestion-main {
        z-index: 10000;
    }
</style>

<div>
    <div id='bdmapscript'></div>
    <div id='bdmap-agt' style='height:400px;width:100%;'></div>
</div>



<script type='text/javascript'>
    var map;
    $(document).ready(function () { 

        var lbl_style = {
            //color : "white", //字体颜色
            fontSize: "16px",//字体大小 　
            backgroundColor: "0.05", //文本标注背景颜色
            border: "0",
            fontWeight: "bold" //字体加粗
        };

        !function (mapInit) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://api.map.baidu.com/api?v=3.0&ak=GSZdhR3cy3egvUIm7njXTT5NIUqMszWo&callback=mapinit";
            window['mapinit'] = function () {
                mapInit();
            };
            $('#bdmapscript').html(script);
        }(function () {
            var points = {{points | safe}};
            var default_lng = 116.404;
            var default_lat = 39.915;
            map = new BMap.Map('bdmap-agt');
            if (points.length > 0) {
                default_lng = points[0].lnglat[0]
                default_lat =  points[0].lnglat[1] 
            }
            map.centerAndZoom(new BMap.Point(default_lng, default_lat), 14);
			
			setTimeout(function() {
                map.panTo(new BMap.Point(default_lng,default_lat), 14);
            }, 1000);
			
            map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
            map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用  

            for (var i = 0; i < points.length; i++) { 
                var pos = points[i];
                var marker = new BMap.Marker(new BMap.Point(pos.lnglat[0], pos.lnglat[1]));
                var label=new BMap.Label( (i+1)+"、"+ pos.name ,{offset:new BMap.Size(30,0)});
                label.setStyle(lbl_style);
                marker.setLabel(label); 
				map.addOverlay(marker);				
            }

            // 定义一个控件类,即function
            function ZoomControl() {
                this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
                this.defaultOffset = new BMap.Size(10, 10);
            }

            // 通过JavaScript的prototype属性继承于BMap.Control
            ZoomControl.prototype = new BMap.Control();

            // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
            // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
            ZoomControl.prototype.initialize = function (map) {
                // 创建一个DOM元素
                var div = document.createElement("div");
                div.innerHTML = '<div id="r-result">搜索地址:<input type="text" id="suggestId" size="20" value="百度"  /></div><div id="searchResultPanel"></div>';

                // 添加DOM元素到地图中
                map.getContainer().appendChild(div);
                // 将DOM元素返回
                return div;
            }
            var myZoomCtrl = new ZoomControl();
            // 添加到地图当中
            map.addControl(myZoomCtrl);


            var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                {
                    "input": "suggestId"
                    , "location": map
                }); 

            ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
                var str = "";
                var _value = e.fromitem.value;
                var value = "";
                if (e.fromitem.index > -1) {
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                G("searchResultPanel").innerHTML = str;
            });

            var myValue;
            ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                setPlace();
            });

            function setPlace() {
                //map.clearOverlays();    //清除地图上所有覆盖物
                function myFun() {
                    var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果 
                    map.centerAndZoom(pp, 14);
                }
                var local = new BMap.LocalSearch(map, { //智能搜索
                    onSearchComplete: myFun
                });
                local.search(myValue);
            }
            function G(id) {
                return document.getElementById(id);
            }



        });

    });

</script>