.net html 百度地图,[ASP.net教程]C#的百度地图开发(四)前端显示与定位

有了这些定位信息，那要如何在前端的页面上显示出来呢？这需要用到百度地图的JavaScript的API。下面是示例代码。

前端代码

[html] view plaincopy

html>

地图

$(document).ready(function () {

var w = $(window).width();

var h = $(document).height();

var coord = $('#').val().split(',');

var lat = coord[0];

var lng = coord[1];

var address = $('#').val();

$("#normal_map").css({

"width": w + "px",

'height': h + 'px'

});

MapApi.LoadLocationMap(lat, lng, 'normal_map', "

" + address + "

");

});

注：

(1).script中http://api.map.baidu.com后面的ak是申请的key，与前面文章中所说的key一致。

(2).引用了jquery的库。

(3).如果还引用了jquery.mobile的库，以适应移动端使用的，记得要将div设置相应的高度和宽度，不然可能会显示一片空白。因为jquery.mobile在渲染时会对页面进行适配的处理。

(4).载入地图的部分封装到了map.js中，其代码如下

[javascript] view plaincopy

var MapApi = (function () {

return {

LoadLocationMap: function (lat, lng, containerId, showText) {

///载入地图

///纬度值

///经度值

///地图容器ID,一般为Div的Id.

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中还封装了全景图的函数。

下面看一下后端代码

[html] view plaincopy

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得到坐标的定位信息。

(2).将得到的地址和坐标赋值到隐藏域中，以便前端使用JS来读取。

测试结果如下图

这样就实现了坐标的前端定位。当然如果有需要，还可以将某段时间内获取的坐标点在地图上画出轨迹来，这个可以参考百度地图的说明。

这是通过坐标来定位的，而坐标的定位一般都是在移动设备上，那如果在PC端呢？这个就需要使用到IP定位

转载请保留本文网址： http://www.shaoqun.com/a/119435.html