zoukankan      html  css  js  c++  java
  • 百度地图使用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>
  • 相关阅读:
    vim字符串替换命令
    Android中View的事件分发机制——Android开发艺术探索笔记
    jQuery源代码框架思路
    C指针——C语言手记
    Python基础二--基本控制语句
    C++中的链式操作
    求一个字串中最长的连续字符串
    C# -- 推断字符能否转化为整形
    Loadrunner检查点使用总结
    LoadRunner设置检查点的几种方法介绍
  • 原文地址:https://www.cnblogs.com/nele/p/5039028.html
Copyright © 2011-2022 走看看