前言:百度地圖標註物數據加載結合百度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
最終實現效果如圖
