用asp.net mvc 3加载 百度地图数据(结合百度API)
前言:百度地图标注物数据加载结合百度API(http://openapi.baidu.com/map/jsdemo.htm) 和百度拾取坐标系统(http://dev.baidu.com/wiki/static/map/API/tool/getPoint/)二者缺一不可，下面就来说说详细的调用和实现方法.(说明:用的是asp.net mvc 3)
1.前端页面代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>地图展示</title>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="http://api.map.baidu.com/api?v=1.2&services=true" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/web/jquery.baidu.map.js")" type="text/javascript"></script>
<style type="text/css">
body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
</head>
<body>
<!--地图显示DIV-->
<div id="container">
</div>
</body>
</html>
2.后台control实现代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Text;
namespace Map.Controllers
{
public class MapController : Controller
{
//
// GET: /Map/
public ActionResult Index()
{
return View();
}
[HttpGet]
//默认加载数据
public ActionResult SearchMap()
{
//默认有两个标注
List<Map> mapList = new List<Map>() {
new Map(){ CenterLat=113.929963M, CenterLng=22.530031M, Zoom=12},
new Map(){ CenterLat=113.925076M, CenterLng=22.498781M, Zoom=12}
};
StringBuilder str = new StringBuilder();
foreach (Map map in mapList)
{
str.Append(string.Format("{0},{1},{2};",
map.CenterLat,
map.CenterLng,
map.Zoom
));
}
return Json(str.ToString(), JsonRequestBehavior.AllowGet);
}
}
//标注实体
public class Map
{
/// <summary>
/// 经度
/// </summary>
public decimal? CenterLng { get; set; }
/// <summary>
/// 纬度
/// </summary>
public decimal? CenterLat { get; set; }
/// <summary>
/// 比列尺
/// </summary>
public decimal? Zoom { get; set; }
}
}
2.js实现代码
var enableScrollWheelZoom = true;
var map = null;
var zoom = 15;
var mapPoint = null;
var enableKeyboard = true;
var enableContinuousZoom = true;
var enableInertialDragging = true;
var CommunityList = [];//坐标数据集合
var MarkerList = [];
function initCommunityList(data) {
CommunityList.length = 0;
if ($.trim(data) != "") {
var strCommunityList = data.split(";");
$.each(strCommunityList, function (i, item) {
if ($.trim(item) != "") {
var instance = item.split(",");
var community = new Object();
community.CenterLng = instance[0];//横坐标
community.CenterLat = instance[1];//竖坐标
community.Zoom = instance[2]; //比列尺
//如果没有坐标，则不加入标注数据
if (community.CenterLat != -1000 && community.CenterLng != -1000) {
CommunityList[CommunityList.length] = community;
}
}
});
}
}
// 编写自定义函数,创建标注
function addMarker(commuinity) {
var marker = _createNormalMarker(commuinity);
map.addOverlay(marker);
MarkerList[MarkerList.length] = marker;
}
//刷新地图标注,以及地图定位
function RefreshMarker() {
ClearMarker();
if (CommunityList.length > 0) {
for (var index = 0; index < CommunityList.length; index++) {
var community = CommunityList[index];
addMarker(community);
}
var commuinty = CommunityList[0];
var firstpoint = new BMap.Point(commuinty.CenterLng, commuinty.CenterLat);
map.centerAndZoom(firstpoint, Number(community.Zoom));
} else {
map.centerAndZoom(mapPoint, zoom); // 初始化地图，设置中心点坐标和地图级别
}
}
//清除历史标注
function ClearMarker() {
if (MarkerList.length > 0) {
map.clearOverlays();
for (i in MarkerList) {
MarkerList[i] = null;
}
MarkerList.length = 0;
}
}
//创建详细标注
function _createNormalMarker(commuinity) {
var point = new BMap.Point(commuinity.CenterLng, commuinity.CenterLat);
var marker = new BMap.Marker(point, { offset: new BMap.Size(0, 13) });
marker.addEventListener("click", function (e) {
var opts = {
width: 400,
height: 250,
title: "<h3>标题</h3>"
}
var infoWindow = null;
var content = "点击标注，成功显示纯文本信息窗口!!!";
infoWindow = new BMap.InfoWindow(content, opts);
map.openInfoWindow(infoWindow, e.point);
});
marker.tag = commuinity;
map.addOverlay(marker);
return marker;
}
window.onload = function () {
try {
mapPoint = new BMap.Point(114.131, 22.649);
if (map == null)
map = new BMap.Map("container", { mapType: BMAP_HYBRID_MAP });
map.centerAndZoom(mapPoint, zoom); // 初始化地图，设置中心点坐标和地图级别
if (enableScrollWheelZoom)
map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
if (enableKeyboard)
map.enableKeyboard(); // 开启键盘控制
if (enableContinuousZoom)
map.enableContinuousZoom(); // 开启连续缩放效果
if (enableInertialDragging)
map.enableInertialDragging(); // 开启惯性拖拽效果
var strUrl = "/Map/SearchMap";
//默认加载标注数据
$.getJSON(strUrl, null,
function (data) {
initCommunityList(data);
RefreshMarker();
});
}
catch (err) {
alert("百度地图加载失败,请确保你的电脑能访问百度地图!!");
}
}
下载地址: http://www.kuaipan.cn/file/id_99609865076342785.htm
最终实现效果如图
