MVC5使用百度地图API(JavaScript library库)【检索信息窗口类】

绝地灬酷狼 2021-06-26 16:06 321阅读 0赞

\#\#Models文件夹实体类  
Area.cs

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MvcDemo.Models
    {
        public class Area
        {
            public int Id { get; set; }
            public string Name { get; set; }
    
            public string Description { get; set; }
    
            public double PointX { get; set; }
    
            public double PointY { get; set; }
    
            public IQueryable<Area> GetData()
            {
                var data = new List<Area>();
                for (var i = 1; i <= 100; i++)
                {
                    data.Add(new Area() { Id = i, Name = "深圳区" + i, Description = "这里是村" + i, PointX = i + 114.059917, PointY = i + 22.545519 });
                }
                return data.AsQueryable();
            }
        }
    
    }

\#\#控制器层  
BaiduMapController.cs

using System.Collections.Generic;
    using System.Linq;
    using System.Web.Mvc;
    using MvcDemo.Models;
    using Newtonsoft.Json;
    
    namespace MvcDemo.Controllers
    {
        public class BaiduMapController : Controller
        {
            public ActionResult BaiduMap()
            {
                return PartialView();
            }
    
            public ContentResult GetData(string name = null)
            {
                var area = new Area();
                IEnumerable<Area> data = string.IsNullOrEmpty(name)
                    ? area.GetData()
                    : area.GetData().Where(n => n.Name.Contains(name));//.Where(n => n.Name == name);
                var result = JsonConvert.SerializeObject(data);
                return Content(result);
            }
        }
    }

\#\#视图  
BaiduMap.cshtml

<!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>百度地图Demo</title>
        <style type="text/css">
            #container {
                height: 780px;
                margin: 20px 15%;
                width: 70%;
            }
    
            .searchDiv {
                margin-top: 30px;
                text-align: center;
            }
    
            .pointDiv {
                margin-top: 5px;
                text-align: center;
            }
        </style>
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=M***************1"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
        <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    </head>
    <body>
        <div class="searchDiv">
            <input type="text" name="name" id="searchInput" />
            <input type="button" value="查询" id="search" />
        </div>
        <div class="pointDiv">
            X：<input id="point-x" />
        </div>
        <div class="pointDiv">
            Y：<input id="point-y" />
        </div>
        <div id="container"></div>
        <script type="text/javascript">
        $(function() {
            setmap("");
            $("#search").click(function() {
                var val = $("#searchInput").val();
                setmap(val);
            });
        });
    
        function setmap(queryval) {
            var map = new BMap.Map("container", { minZoom: 1, maxZoom: 50 }); // 创建地图实例
    
            map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP] })); //添加地图类型控件
            map.addControl(new BMap.NavigationControl()); //添加地图平移缩放控件
            map.addControl(new BMap.ScaleControl()); //添加比例尺控件
            if (queryval=="") {
                map.centerAndZoom(new BMap.Point(121.464715,31.264803), 12); // 初始化地图，设置中心点坐标和地图级别
            } else {
                map.centerAndZoom(queryval, 15); // 初始化地图，用城市名设置中心点和地图级别
    
            }
    
            map.addEventListener("click", function(e) {
                $("#point-x").val(e.point.lng);
                $("#point-y").val(e.point.lat);
            });
            $.get('@Url.Action("GetData", "BaiduMap")', { name: queryval }, function(data) {
                data = $.parseJSON(data);
    
                var point = new Array(); //存放标注点经纬信息的数组
                var marker = new Array(); //存放标注点对象的数组
                var content = new Array(); //存放提示信息窗口对象的数组
                var searchInfoWindow = new Array(); //存放检索信息窗口对象的数组
                for (var i = 0; i < data.length; i++) {
                    point[i] = new BMap.Point(data[i].PointX, data[i].PointY); //循环生成新的地图点
                    marker[i] = new BMap.Marker(point[i]); //按照地图点坐标生成标记
                    map.addOverlay(marker[i]); //添加点
                    if (data.length == 1)
                        map.centerAndZoom(point[0], 18); // 初始化地图，设置中心点坐标和地图级别
    
                    content[i] = data[i].Description; // 信息窗口内容
                    searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, content[i], {
                        //创建百度样式检索信息窗口对象
                        title: data[i].Name, //标题
                        width: 290, //宽度
                        //height: 55,              //高度
                        panel: "panel", //检索结果面板
                        enableAutoPan: true, //自动平移
                        enableSendToPhone: false, //是否启动发送到手机功能,默认开启
                        searchTypes: [
                            //BMAPLIB_TAB_SEARCH, //周边检索
                            BMAPLIB_TAB_TO_HERE, //到这里去
                            BMAPLIB_TAB_FROM_HERE //从这里出发
                        ]
                    });
                    //添加点击事件
                    marker[i].addEventListener("click",
                        (function(k) { // js 闭包
                            return function() {
                                //将被点击marker置为中心
                                //map.centerAndZoom(point[k], 18);
                                //在marker上打开检索信息窗口
                                searchInfoWindow[k].open(marker[k]);
    
                            };
                        })(i)
                    );
                }
            });
        }
        </script>
    </body>
    </html>

\#\#运行结果如图:  
![这里写图片描述][20180908000955442]

![这里写图片描述][20180908001013582]

![这里写图片描述][20180908001027658]

[20180908000955442]: /images/20210626/80e41ff2721e4ee28379518a4dcbe42d.png
[20180908001013582]: /images/20210626/60abbab314e442dca77e25f88fe5ab17.png
[20180908001027658]: /images/20210626/d07a4a7dd92e4a5fb3794fdb8921e8fd.png