版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/WuLex/article/details/82504080
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>
