网页显示百度地图 Jquery

 

cshtml:

<div class="modal" style="visibility: hidden">
     <div id="map"></div>
</div>


<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6713c5e605ec1fdcfbe108513da6cf49"></script>

Jquery:

 var map = new BMap.Map('map'), form = $('.form');
        map.enableContinuousZoom();
        map.enableKeyboard();
        map.enableInertialDragging();
        map.enableScrollWheelZoom();//启动鼠标滚轮放大缩小地图
        map.addControl(new BMap.MapTypeControl());//添加地图类型控件,默认为地图右上方
        map.addControl(new BMap.OverviewMapControl());//添加缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。
        map.addControl(new BMap.ScaleControl());//添加比例尺控件,默认位于地图左下方,显示地图的比例关系。
        map.addControl(new BMap.NavigationControl());//添加地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能。移动端提供缩放控件,默认位于地图右下方。

    var dealerID = $('input[name="Dealer"]'), dealerDisplay = $('#dealerDisplay');
        //获取全部维修站信息

        function select(id, name) {
            dealerID.val(id);
            dealerDisplay.val(name);
            $('.modal').click();
        }

        $.get('dealers.aspx', function (dealers) {
            dealers = eval(dealers);
            for (var i = 0; i < dealers.length; i++) {
                var dealer = dealers[i];
                //若为已存在订单,显示已选择的维修站名称
                if (dealerID.val() && dealerID.val() == dealer.ID) {
                    dealerDisplay.val(dealer.Name);
                }
                //初始化地图标注点
                marker = new BMap.Marker(new BMap.Point(dealer.Longitude, dealer.Latitude));
                //初始标注点化信息窗口
                info = new BMap.InfoWindow("<h2>" + dealer.Name + "</h2><p>地址:" + dealer.Address + "<br/>未确认:" + dealer.Unaccepted + "&nbsp&nbsp&nbsp&nbsp维修中:" + dealer.Uncompleted + "<br/><a style=\"float:right\" name=\"select\"  href=\"javascript:select('" + dealer.ID + "','" + dealer.Name + "')\">选择</a></p>");
                marker.infoWindow = info;
                //添加标注点事件,即点击标注点,即打开该标注点的信息窗口
                marker.addEventListener('click', function (e) {
                    this.openInfoWindow(e.target.infoWindow);
                })
                map.addOverlay(marker);//添加标注点
            }
        });

 

posted @ 2015-06-17 14:15  璎Nicole珞  阅读(1836)  评论(0编辑  收藏  举报