C#的百度地圖開發(四)前端顯示與定位

時間 2019-11-18

標籤 c# 百度地圖開發前端顯示定位欄目 C# 简体版

原文原文鏈接

在《C#的百度地圖開發(三)依據座標獲取位置、商圈及周邊信息》中已經獲得座標的位置信息，有了這些定位信息，那要如何在前端的頁面上顯示出來呢？這須要用到百度地圖的JavaScript的API。下面是示例代碼。javascript

前端代碼css

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewMap.aspx.cs" Inherits="TEST.ViewMap" %>

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>地圖</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="/js/map.js"></script>
    <script src="/js/jquery.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XXXXXXXXXXXX"></script>
</head>
<body>
    <div id="normal_map"></div>
    <input type="hidden" runat="server" id="HiddenCoord" />
    <input type="hidden" runat="server" id="HiddenAddress" />
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        var w = $(window).width();
        var h = $(document).height();
        var coord = $('#<%=HiddenCoord.ClientID%>').val().split(',');
        var lat = coord[0];
        var lng = coord[1];
        var address = $('#<%=HiddenAddress.ClientID%>').val();
        $("#normal_map").css({
            "width": w + "px",
            'height': h + 'px'
        });
        MapApi.LoadLocationMap(lat, lng, 'normal_map', "<p>" + address + "</p>");

    });
</script>

注：

(1).script中http://api.map.baidu.com後面的ak是申請的key，與前面文章中所說的key一致。html

(2).引用了jquery的庫。前端

(3).若是還引用了jquery.mobile的庫，以適應移動端使用的，記得要將div設置相應的高度和寬度，否則可能會顯示一片空白。由於jquery.mobile在渲染時會對頁面進行適配的處理。java

(4).載入地圖的部分封裝到了map.js中，其代碼以下jquery

var MapApi = (function () {
    return {
        LoadLocationMap: function (lat, lng, containerId, showText) {
            ///<summary>載入地圖</summary>
            ///<param name="lat">緯度值</param>
            ///<param name="lng">經度值</param>
            ///<param name="containerId">地圖容器ID,通常爲Div的Id.</param>    
            var map = new BMap.Map(containerId);            // 建立Map實例
            var point = new BMap.Point(lng, lat); // 建立點座標
            var marker = new BMap.Marker(point);  // 建立標註
            map.addOverlay(marker);              // 將標註添加到地圖中
            map.centerAndZoom(point, 15);
            map.enableScrollWheelZoom();                 //啓用滾輪放大縮小
            var opts = {
                width: 50,     // 信息窗口寬度
                height: 30,     // 信息窗口高度
                title: showText, // 信息窗口標題
                enableMessage: false,//設置容許信息窗發送短息
                message: showText
            }
            var infoWindow = new BMap.InfoWindow("", opts);  // 建立信息窗口對象
            map.openInfoWindow(infoWindow, point); //開啓信息窗口    
        },
        LoadMap: function (lat, lng, panoramaContainerId, normalMapContainerId) {
            //全景圖展現
            var panorama = new BMap.Panorama(panoramaContainerId);
            panorama.setPosition(new BMap.Point(lng, lat)); //根據經緯度座標展現全景圖
            panorama.setPov({ heading: -40, pitch: 6 });

            panorama.addEventListener('position_changed', function (e) { //全景圖位置改變後，普通地圖中心點也隨之改變
                var pos = panorama.getPosition();
                map.setCenter(new BMap.Point(pos.lng, pos.lat));
                marker.setPosition(pos);
            });
            //普通地圖展現
            var mapOption = {
                mapType: BMAP_NORMAL_MAP,
                maxZoom: 18,
                drawMargin: 0,
                enableFulltimeSpotClick: true,
                enableHighResolution: true
            }
            var map = new BMap.Map(normalMapContainerId, mapOption);
            var testpoint = new BMap.Point(lng, lat);
            map.centerAndZoom(testpoint, 18);
            var marker = new BMap.Marker(testpoint);
            marker.enableDragging();
            map.addOverlay(marker);
            marker.addEventListener('dragend', function (e) {
                panorama.setPosition(e.point); //拖動marker後，全景圖位置也隨着改變
                panorama.setPov({ heading: -40, pitch: 6 });
            });
        }
    }
})();

注：該JS中還封裝了全景圖的函數。

下面看一下後端代碼後端

public partial class ViewMap : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                InitLoad();
            }
        }

        private void InitLoad()
        {
            Coordinate coordinate = new Coordinate("39.92", "116.46");
            CoordLocationResult coordLocationResult = BaiduMap.FetchLocation(coordinate);
            HiddenAddress.Value = coordLocationResult.result.formatted_address;
            HiddenCoord.Value = String.Format("{0},{1}", 
                                              coordLocationResult.result.location.lat, 
                                              coordLocationResult.result.location.lng);
        }
    }

注:

(1).經過BaiduMap.FetchLocation獲得座標的定位信息。api

(2).將獲得的地址和座標賦值到隱藏域中，以便前端使用JS來讀取。markdown

測試結果以下圖函數