用asp.net mvc 3載入百度地圖資料(結合百度API)

最後更新：2018-07-20 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前言:百度地表徵圖注物資料載入結合百度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

最終實現效果如圖

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More