网页显示百度地图 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);//添加标注点
            }
        });

 

转载于:https://www.cnblogs.com/sxhNicole/p/4583182.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值