@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="width: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 = {
// width: 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>