使用VS2013,用asp.net开发一个百度地图项目,
有没有好心的大哥指点一记啊!!
申请百度地图密钥,自己啃api了。:http://developer.baidu.com/map/index.php?title=jspopular
要调用百度的API,地理解码类:BMap.Geocoder
给你个思路
1、使用.net mvc。
2、要有的地图点的数据库。
3、开发应用的工作量很大我只能给一个大概的架构。
前端代码:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts{
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=yjL9PdwLfm1qC3EliLpDe2bw"></script>
<script type="text/javascript">
var map = new BMap.Map("baiduMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15);
$("#btn1").on('click', function () {
getPoints("来两个点");
});
$("#btn2").on('click', function () {
getPoints("来三个点");
});
//获取点
//@@ {string} keyword 关键词
function getPoints(keyword) {
$.ajax({
url: "/Map/GetPoints",
type: "POST",
dataType: 'json',
data: { keyword: keyword },
success: function (data, textStatus, jqXHR) {
render(data.points);
},
error: function (jqXHR, textStatus, errorThrown) {
alert("连接服务器出错" + textStatus);
}
});
}
//渲染在地图上
function render(data) {
map.clearOverlays(); //清空地图上所有的点
//遍历从服务器上获取的点
for (var i = 0, item; item = data[i]; i++) {
map.addOverlay(new BMap.Marker(new BMap.Point(item.Longitude, item.Latitude))); //添加到地图上面
}
}
</script>
}
<style type="text/css">
#navigation {
float: left;
position: relative;
height: 800px;
width: 20%;
}
#baiduMap {
float: left;
position: relative;
height: 800px;
width: 80%;
}
</style>
<div id="main">
<!--导航-->
<dl id="navigation">
<dd><button id="btn1">给爷来2个点</button></dd>
<dd><button id="btn2">给爷来3个点</button></dd>
</dl>
<section id="baiduMap"></section>
</div>
服务器代码
using System.Collections.Generic;
using System.Web.Mvc;
namespace BaiduMap.Controllers
{
public class MapController : Controller
{
/// <summary>
/// 返回界面给浏览器
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult GetPoints(string keyword)
{
var points = new List<MapPoint> {
new MapPoint{Longitude = 116.405,Latitude=39.915},
new MapPoint{Longitude = 116.408,Latitude=39.913},
};
if (keyword.Equals("来三个点")) points.Add(new MapPoint { Longitude = 116.404, Latitude = 39.918 });
return Json(new { points });//返回点集合
}
}
public class MapPoint
{
/// <summary>
/// 经度
/// </summary>
public double Longitude { get; set; }
/// <summary>
/// 纬度
/// </summary>
public double Latitude { get; set; }
}
}
最后的结果图
帮助文档
https://api.jquery.com/jQuery.ajax/
http://developer.baidu.com/map/index.php?title=jspopular/guide/cover
http://developer.baidu.com/map/jsdemo.htm#c1_1