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