附近地点搜索 ,地图

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Ga3BV2rAVcPtu1aH3QbeSxXN"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <script type="text/javascript" src="/webService/StoreSearch.ashx"></script>
    <script type="text/javascript" src="/js/string.format.js"></script>

 <div class="contents_box" style="padding-bottom: 40px;">
        <div class="select1">
            <ul>
                <li style="font-family: 黑体; font-size: 20px; color: #ffffff; opacity: 0.9;">1、请选择您要查询的产品</li>
                <li style="font-size: 16px; font-family: 黑体; color: #ffffff; opacity: 0.8;">
                    <label>
                        <input type="radio" value="1" name="rbtType" checked="checked" style=" 16px;
                            height: 16px; margin: 0px 7px;" />电壁挂热水器、燃气快速热水器或家庭中央热水炉
                    </label>
                    <label>
                        <input type="radio" value="2" name="rbtType" style=" 16px; height: 16px; margin: 0px 7px;" />采暖热水燃气壁挂两用炉
                    </label>
                    <label>
                        <input type="radio" value="3" name="rbtType" style=" 16px; height: 16px; margin: 0px 7px;" />空气源热泵热水器
                    </label>
                     <label>
                        <input type="radio" value="4" name="rbtType" style=" 16px; height:16px; margin:0px 7px;"/>净水机
                    </label>
                   <%-- <label>
                        <input type="radio" value="5" name="rbtType" style=" 16px; height:16px; margin:0px 7px;"/>空气净化器
                    </label>--%>
                </li>
            </ul>
        </div>
        <div class="select2">
            <ul>
                <li style="font-family: 黑体; font-size: 20px; color: #ffffff; opacity: 0.9;">2、请选择您要查询的体验店地址</li>
                <li style="font-size: 16px; font-family: 黑体;">
                    <div class="select">
                        <div class="select_bg" id="drpProvinceText" onclick="$('#drpProvince').show();$('#drpCity').hide();$('#drpStores').hide();">
                            <a class="Options00">请选择省份</a> <span class="Drop-down_box"><a>
                                <img src="images/select_sj.png" /></a></span>
                        </div>
                        <div class="clear">
                        </div>
                        <div class="selectBox" id="drpProvince" style="display: none; max-height: 300px;
                            overflow: auto; margin: 0px;">
                            <ul>
                            </ul>
                        </div>
                    </div>
                    <div class="select Lengthen2">
                        <div class="select_bg" id="drpCityText" onclick="$('#drpProvince').hide();$('#drpCity').show();$('#drpStores').hide();">
                            <a class="Options00">请选择城市</a> <span class="Drop-down_box"><a>
                                <img src="images/select_sj.png" /></a></span>
                        </div>
                        <div class="clear">
                        </div>
                        <div class="selectBox" style="display: none; max-height: 300px; overflow: auto; margin: 0px;"
                            id="drpCity">
                            <ul>
                            </ul>
                        </div>
                    </div>
                    <div class="select Lengthen">
                        <div class="select_bg Lengthen" id="drpStoresText" onclick="$('#drpProvince').hide();$('#drpCity').hide();$('#drpStores').show();">
                            <a class="Options00">请选择门店</a> <span class="Drop-down_box"><a>
                                <img src="images/select_sj.png" /></a></span>
                        </div>
                        <div class="clear">
                        </div>
                        <div class="selectBox Lengthen" style="display: none; max-height: 300px; overflow: auto;
                            margin: 0px;" id="drpStores">
                            <ul>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clear">
        </div>
        <div class="StoreInformation">
            <div class="StoreInformation_left">
                <div class="section shop_count">
                    共找到 <span>0</span> 家门店</div>
                <div class="address_wrap">
                    <ul class="address_list">
                    </ul>
                </div>
            </div>
            <div class="StoreInformation_right" id="allmap">
                <a href="#">
                    <img src="images/storeMap.jpg" /></a>
            </div>
        </div>
    </div>
    <div class="lines02">
    </div>
    <div style="display: none">
        <ul id="storeFormat">
            <li onclick="selStoreMap(this,true)" id="map_{4}" lng="{5}" lat="{6}"><i>{0}</i>
                <div class="address">
                    <h6 name="title">
                        {1}</h6>
                    <div name="address">
                        {2}</div>
                    <div class="tel">
                        电话：{3}</div>
                </div>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var SeriesType = 1;
        var s = location.search;
        if (s.indexOf("?") == 0 && s.indexOf("t") > 0) {
            var t = s.split("=")[1];
            if (t && t <= 3) SeriesType = t;
        }
        function setProvinceSelection() {
            $("#drpProvince ul").empty(); $("#drpCity ul").empty(); $("#drpStores ul").empty();
            $("#drpProvince ul").html("<li onclick="selProvince('-1','请选择省份')"> 请选择省份 </li>");
            $("#drpCity ul").html("<li onclick="selCity('-1','请选择城市')"> 请选择城市 </li>");
            $("#drpStores ul").html("<li onclick="selStores('-1','请选择门店')"> 请选择门店 </li>");
            $("#drpProvinceText a").eq(0).text("请选择省份"); $("#drpCityText a").eq(0).text("请选择城市"); $("#drpStoresText a").eq(0).text("请选择门店");
            $("#drpProvince").hide(); $("#drpCity").hide(); $("#drpStores").hide();
            for (var i = 0; i < joProvince.length; i++) {
                if (joProvince[i].SeriesType == SeriesType) {
                    $("#drpProvince ul").append(String.format("<li onclick="selProvince('{0}','{1}')"> {1} </li>", joProvince[i].ProvinceID, joProvince[i].ProvinceName));
                }
            }
        }
        var nowid = 0;
        function selProvince(id, txt) {
            $("#drpProvinceText a").eq(0).text(txt);
            $("#drpProvince").hide();
            if (nowid == id) return;
            $("#drpCity ul").html("<li onclick="selCity('-1','请选择城市')"> 请选择城市 </li>");
            $("#drpStores ul").html("<li onclick="selStores('-1','请选择门店')"> 请选择门店 </li>");
            $("#drpCityText a").eq(0).text("请选择城市"); $("#drpStoresText a").eq(0).text("请选择门店");
            GetTowns(id);
            nowid = id;
        }
        function selCity(id, txt) {
            $("#drpCityText a").eq(0).text(txt);
            $("#drpCity").hide();
            if (nowid == id) return;
            $("#drpStores ul").html("<li onclick="selStores('-1','请选择门店')"> 请选择门店 </li>");
            $("#drpStoresText a").eq(0).text("请选择门店");
            GetDistrict(id);
            nowid = id;
 
            map.centerAndZoom(txt, 12);
            map.clearOverlays();
            AreaMapInit();
        }
        function selStores(id, txt) {
            $("#drpStoresText a").eq(0).text(txt);
            $("#drpStores").hide();
            for (var i = 0; i < joDistrict.length; i++) {
                if (joDistrict[i].DistrictID == id) {
                    $("#map_" + id).addClass("current").siblings().removeClass("current");
                    selStoreMap($("#map_" + id), true);
                }
            }
        }
        window.onload = function () {
            $("input[name='rbtType']").each(function () {
                if ($(this).val() == SeriesType) {
                    $(this).attr("checked", "checked");
                }
            });
            $("input[name='rbtType']").change(function () {
                SeriesType = $(this).val();
                setProvinceSelection();
            });
            setProvinceSelection();
 
            $("#drpProvince li").each(function () {
                if ($.trim($(this).text()) == "江苏") {
                    $(this).click();
                    setTimeout(function () {
                        $("#drpCity li").each(function () {
                            if ($.trim($(this).text()) == "南京") {
                                $(this).click();
                                return false;
                            }
                        });
                    }, 2000);
                    return false;
                }
            });
        };
 
        function GetTowns(pid) {
            if (pid <= 0) return;
            $.ajax({
                url: "/webService/StoreSearch.ashx?type=GetTowns&id=" + pid,
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].TownID) {
                            $("#drpCity ul").append(String.format("<li onclick="selCity('{0}','{1}')"> {1} </li>", data[i].TownID, data[i].TownName));
                        } else {
                            $("#drpCity ul").append(String.format("<li onclick="selCity('{0}','{1}')"> {1} </li>", data[0].Province.Towns[i].TownID, data[0].Province.Towns[i].TownName));
                        }
                    }
                }
            });
        }
        var joDistrict, storeFormatHtml = "";
        function GetDistrict(pid) {
            if (pid <= 0) return;
            $.ajax({
                url: "/webService/StoreSearch.ashx?type=GetDistrict&id=" + pid,
                dataType: "json",
                success: function (data) {
                    joDistrict = data;
                    $(".address_list").empty();
                    storeFormatHtml = "";
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].DistrictID) {
                            $("#drpStores ul").append(String.format("<li onclick="selStores('{0}','{1}')"> {1}</li>", data[i].DistrictID, data[i].DistrictName));
                            storeFormatHtml = String.format($("#storeFormat").html(), i + 1, data[i].DistrictName, data[i].DistrictAddress, data[i].Phone, data[i].DistrictID, data[i].Lng, data[i].Lat);
                        } else {
                            $("#drpStores ul").append(String.format("<li onclick="selStores('{0}','{1}')"> {1}</li>", data[0].Towns.District[i].DistrictID, data[0].Towns.District[i].DistrictName));
                            storeFormatHtml = String.format($("#storeFormat").html(), i + 1, data[0].Towns.District[i].DistrictName, data[0].Towns.District[i].DistrictAddress, data[0].Towns.District[i].Phone, data[0].Towns.District[i].DistrictID, data[0].Towns.District[i].Lng, data[0].Towns.District[i].Lat);
                        }
                        $(".address_list").append(storeFormatHtml)
                    }
 
                    $(".shop_count span").text(data.length);
                }
            });
        }
        var map = new BMap.Map("allmap");  // 创建Map实例
        map.enableScrollWheelZoom(true);
        map.centerAndZoom("南京", 12);
 
        $(".address_list li").click(function () { $(this).addClass("current").siblings().removeClass("current"); });
        function selStoreMap(ele, isHighlightItem) {
            if (isHighlightItem) {
                $(ele).addClass("current").siblings().removeClass("current");
            }
            var lng = $(ele).attr("lng");
            var lat = $(ele).attr("lat");
            if (lng == "null" || lat == "null") {
                return;
            }
 
            var poi = new BMap.Point(lng, lat);
            map.enableScrollWheelZoom();
 
            var _title = $(ele).find("[name=title]").text();
            var _address = $(ele).find("[name=address]").text();
            var _telphone = $.trim($(ele).find(".tel").text()).substring(3);
            var contentInfo = '<div style="margin:0;line-height:20px;padding:2px;">' +
                    '<img src="/images/map1.gif" alt="" style="float:right;zoom:1;overflow:hidden;100px;height:100px;margin-left:3px;"/>' + '<p>' +
            _address + '</p>' + '<br/><p>' + _telphone + '</p>' +
                  '</div>';
            var searchInfoWindow = null;
            searchInfoWindow = new BMapLib.SearchInfoWindow(map, contentInfo, {
                title: _title,      //标题
                 290,             //宽度
                height: 105,              //高度
                panel: "panel",         //检索结果面板
                enableAutoPan: true,     //自动平移
                searchTypes: [
				BMAPLIB_TAB_TO_HERE,  //到这里去
				BMAPLIB_TAB_FROM_HERE //从这里出发
			]
            });
            var marker = new BMap.Marker(poi); //创建marker对象
            marker.enableDragging(); //marker可拖拽
            map.addOverlay(marker); //在地图中添加marker
            marker.addEventListener("click", function (e) {
                searchInfoWindow.open(marker);
            })
            if (isHighlightItem) {
                searchInfoWindow.open(marker);
            }
        }
 
        function AreaMapInit() {
            setTimeout(function () {
                $(".address_list li").each(function () {
                    selStoreMap($(this), false);
                });
            }, 2000);
 
        }
    </script>