@model ShanwuWebSite.Areas.COM.Models.POS001Model @using System.Data; @{ ViewBag.Title = "Index"; Layout = "~/Areas/COM/Views/Shared/_Layout.cshtml"; } <script src="http://api.map.baidu.com/api?v=2.0&ak=Ooaq16jRplQWMN3SxnxPq3rW" type="text/javascript"></script> <div class="row" style="margin-top:20px;"> <div class="col-lg-2"> <input type="text" class="form-control" id="name" placeholder="请输入维修工姓名"> <ul class="list-group" id="lstUser"> @foreach (DataRow row in Model.DataSource.Rows) { <li class="list-group-item"><a href="javascript:void(0);" onclick="add_overlay('117','36.7','@row["Login_ID"]','@row["Login_Name"]','@row["LevelName"]','@row["OrderCount"]','@row["Photo"]')">@row["Login_Name"]</a></li> } </ul> </div> <div class="col-lg-10"> <div id="allmap" style="1000px; height:600px;"> </div> </div> </div> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 //map.centerAndZoom(new BMap.Point(@Model.Latitude, @Model.Longitude), 11); // 初始化地图,设置中心点坐标和地图级别 map.centerAndZoom("济南", 13); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("济南"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 // var marker = new BMap.Marker(new BMap.Point(117, 37)); $(function () { $('#name').bind('keypress', function () { var name = $.trim($("#name").val()); $.ajax({ type: "post", data: { name: name }, url: "@Url.Action("POS00101", "POS001")", success: function (data) { $("#lstUser").empty; $("#lstUser").html(data); }, error: function () { } }); }); }); //添加覆盖物 function add_overlay(latitude, longitude, id, name, rank, orderCount, avator) { remove_overlay(); var point = new BMap.Point(latitude, longitude); // var marker = new BMap.Marker(point); //var opts = { // 200, // 信息窗口宽度 // height: 100, // 信息窗口高度 // title: name, // 信息窗口标题 // enableMessage: true,//设置允许信息窗发送短息 // message: "asdasdasd" //} //var infoWindow = new BMap.InfoWindow("地址:北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象 //marker.addEventListener("click", function () { // map.openInfoWindow(infoWindow, point); //开启信息窗口 //}); var myIcon = new BMap.Icon('/COM/POS001/GetAvator?path=' + avator, new BMap.Size(100, 100)); var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注 var gc = new BMap.Geocoder(); gc.getLocation(point, function (rs) { var addComp = rs.addressComponents; var adr = "地址: " + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber; var sContent = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + name + "</h4>" + "<img style='float:right;margin:4px' id='userAvator' src='" + avator + "' width='120' height='100'/>" + "<p style='margin:0;line-height:1.5;font-size:13px;'>等级:" + rank + "</p>" + "<p style='margin:0;line-height:1.5;font-size:13px;'>" + adr + "</p>" + "<p style='margin:0;line-height:1.5;font-size:13px;'>电话:" + id + "</p>" + "<p style='margin:0;line-height:1.5;font-size:13px;'>当前订单数:" + orderCount + "</p>" + "</div>"; var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象 //创建信息窗口,点击标注时显示标注对应的车牌号码以及当前地址 //var infoWindow = new BMap.InfoWindow(adr, opts); //marker.addEventListener("click", function () { // map.openInfoWindow(infoWindow, point); //开启信息窗口 //}); marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); document.getElementById('userAvator').onload = function () { infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏 } }); }); map.addOverlay(marker); //增加点 } function remove_overlay() { map.clearOverlays(); } </script>