首页 > 代码库 > C#的百度地图开发(四)前端显示与定位

C#的百度地图开发(四)前端显示与定位

2024-11-03 18:39:02   204人阅读

在《C#的百度地图开发(三)依据坐标获取位置、商圈及周边信息》中已经得到坐标的位置信息，有了这些定位信息，那要如何在前端的页面上显示出来呢？这需要用到百度地图的JavaScript的API。下面是示例代码。

前端代码

<%@ 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=http://www.mamicode.com/"/js/map.js"></script>>
注：
(1).script中http://api.map.baidu.com后面的ak是申请的key，与前面文章中所说的key一致。
(2).引用了jquery的库。
(3).如果还引用了jquery.mobile的库，以适应移动端使用的，记得要将div设置相应的高度和宽度，不然可能会显示一片空白。因为jquery.mobile在渲染时会对页面进行适配的处理。
(4).载入地图的部分封装到了map.js中，其代码如下
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 = http://www.mamicode.com/coordLocationResult.result.formatted_address;>注:
(1).通过BaiduMap.FetchLocation得到坐标的定位信息。
(2).将得到的地址和坐标赋值到隐藏域中，以便前端使用JS来读取。
测试结果如下图
技术分享
这样就实现了坐标的前端定位。当然如果有需要，还可以将某段时间内获取的坐标点在地图上画出轨迹来，这个可以参考百度地图的说明。
这是通过坐标来定位的，而坐标的定位一般都是在移动设备上，那如果在PC端呢？这个就需要使用到IP定位，具体请参看后文。
转载请注明出处http://blog.csdn.net/xxdddail/article/details/42706113。


C#的百度地图开发(四)前端显示与定位


联系
我们