ykw
/
hemall.terabimsoft.com.cn


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
							<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Baidu Maps</title>
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #fff;
        }

        #search_box {
            position: fixed;
            top: 5px;
            right: 5px;
            z-index: 100;
        }

        #search_box input {
            -webkit-appearance: none;
            border-radius: 3px;
            box-sizing: border-box;
            outline: 0;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
        }

        #search_box input[type="text"] {
            background-color: #cccccc;
            border: 1px solid #ccc;
            color: #207ab7;
            width: 180px;
            padding: 5px;
            font-weight: bold;
            font-size: 16px;
            opacity: 0.7;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
        }

        #search_box input[type="button"] {
            margin-left: 5px;
            background-color: #207ab7;
            border: 1px solid #207ab7;
            color: #fff;
            padding: 4px 6px;
            font-size: 14px;
        }

        #div-show-list {
            position: fixed;
            top:37px;
            right:57px;
            z-index: 200;
            background:white;
            font-weight: 400;
            width:178px;font-size: 14px;
            color: #7274A7;border:1px solid #ccc;
        }

        #div-show-list .div-item:hover {
            color: #009E94;
            background-color: #ebcccc;
            font-weight: 700;
        }
    </style>
</head>
<body>
<div id="search_box">
    <input id="kw_input" class="kw_input" type="text" value="" autocomplete="off" placeholder="输入要搜索的地点"/>
    <input type="button" value="搜索" onclick="searchMapByStationName()"></div>

<div id="div-show-list" style="display:block;"></div>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script charset="utf-8" src="https://api.map.baidu.com/api?v=2.0&ak=QXSZyPZk26shrYzAXjTkDLx5LbRCHECz"></script>

<script>

    var map;
    initialize();
    /**
     * 页面初始化加载
     */
    function initialize() {
        map = new BMap.Map('map_canvas');
        var point = new BMap.Point(116.331398, 39.897445);
        map.centerAndZoom(point, 19);
        map.addControl(new BMap.NavigationControl());
        ////开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);

        //根据IP定位
        var myCity = new BMap.LocalCity();
        myCity.get(function (result) {
            map.setCenter(result.name);
        });

        /**
         * 百度地图 监听点击事件
         */
        map.addEventListener("click", function (e) {

            var ponitE = e.point;
            var marker = new BMap.Marker(new BMap.Point(ponitE.lng, ponitE.lat));
            map.clearOverlays();
            map.addOverlay(marker);
            map.panTo(ponitE);
            parent.tinymceLng = ponitE.lng;
            parent.tinymceLat = ponitE.lat;
            console.log('经纬度：',ponitE); // 经纬度数据
            }
        );
    }

    document.getElementById('kw_input').addEventListener('keypress', function (e) {
        //回车键效果
        if (e.keyCode == '13') {
            e.preventDefault();
            searchMapByStationName();
        }
    });
    /**
     * 关键字 搜索输入框触发事件，保证实时的数据刷新显示效果
     */
    $(".kw_input").bind("input propertychange", function () {
        var val = $(".kw_input").val();
        var options = {
            onSearchComplete: function (results) {
                if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) {
                    // 判断状态是否正确
                    if (results.getCurrentNumPois() == 0) {
                        console.log('搜索不到该地区');
                        $("#div-show-list").css("display", "none");
                    } else {
                        var searchResHtml = "";
                        for (var i = 0; i < results.getCurrentNumPois(); i++) {
                            searchResHtml += "<div style='padding:5px;cursor:pointer' class='div-item'>" + results.getPoi(i).title + "</div>";
                        }
                        $("#div-show-list").html(searchResHtml);
                        $("#div-show-list").css("display", "block");
                    }
                }
            }
        };
        var localSearch = new BMap.LocalSearch(map, options);
        localSearch.search(val);
    });

    /**
     * js动态加载 html元素，html中绑定的click事件不生效的解决办法
     * @param obj
     */
    $("body").on('click', '.div-item', function () {
        //do sth...
        $("#kw_input").val($(this).html());
        $("#div-show-list").css("display", "none");
        searchMapByStationName();
    });

    /**
     * 根据输入的文字 搜索对应的百度地图信息
     * @returns {boolean}
     */
    function searchMapByStationName() {
        var keyword = document.getElementById("kw_input").value;
        var local = new BMap.LocalSearch(map, {renderOptions: {map: map}});

        local.setSearchCompleteCallback(function (searchResult) {
            console.log(searchResult);
            var poi = searchResult.getPoi(0);
            if(poi){
                var pointNew = poi.point;
                map.centerAndZoom(pointNew, 19);
                var marker = new BMap.Marker(new BMap.Point(pointNew.lng, pointNew.lat));
                parent.tinymceLng = pointNew.lng;
                parent.tinymceLat = pointNew.lat;
                map.clearOverlays();
                map.addOverlay(marker);
                map.panTo(pointNew);
            }else {
                console.log('Sorry，未查到地址信息')
            }
        });
        local.search(keyword);
    }
</script>
</html>