百度地图使用1(傻逼做法)

@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>
原文地址:https://www.cnblogs.com/nele/p/5039028.html