MVC5使用BaiduMap百度地图示例

最新推荐文章于 2022-09-13 18:08:24 发布

.NET跨平台

最新推荐文章于 2022-09-13 18:08:24 发布

阅读量1.2k

点赞数 1

分类专栏： ASP.NET MVC4|MVC5 文章标签： mvc 百度地图

原文链接：https://blog.csdn.net/WuLex

版权

ASP.NET MVC4|MVC5 专栏收录该内容

122 篇文章 11 订阅

订阅专栏

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 == name);
            var result = JsonConvert.SerializeObject(data);
            return Content(result);
        }
    }
}

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 <= 30; i++)
            {
                data.Add(new Area()
                {
                    Id = i,
                    Name = "村" + i,
                    Description = "这里是村" + i,
                    PointX = i + 119.082458,
                    PointY = i + 36.925349
                });
            }

            return data.AsQueryable();
        }
    }
}

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 {
            margin: 20px 15%;
            width: 70%;
            height: 780px;
        }

        .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=MY2B989NMlReQYQE94rwBkd1"></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(val) {
            var map = new BMap.Map("container", { minZoom: 10, maxZoom: 19 }); // 创建地图实例

            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()); //添加比例尺控件
            map.centerAndZoom(new BMap.Point(119.226569, 36.781382), 12); // 初始化地图，设置中心点坐标和地图级别，如果有多个，则以寒亭区政府为中心

            map.addEventListener("click", function (e) {
                $("#point-x").val(e.point.lng);
                $("#point-y").val(e.point.lat);
            });
            $.get('@Url.Action("GetData", "BaiduMap")', { name: val }, 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>