- <script language="javascript" type="text/javascript">
- $(document).ready(function () {
- $.ajax({
- type: "POST",
- url: "GetMap.ashx/ProcessRequest",
- dataType: "json",
- success: function (data) {
- var datalist = data;
- $(datalist).each(function (index, content) {
- var map = new BMap.Map("container"); // 创建Map实例
- //向地图中添加缩放控件
- var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
- map.addControl(ctrl_nav);
- //向地图中添加缩略图控件
- var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, isOpen: 1 });
- map.addControl(ctrl_ove); //向地图中添加比例尺控件
- var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
- map.addControl(ctrl_sca);
- var point = new BMap.Point(content.LATITUDE, content.LONGITUDE); // 创建点坐标
- map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
- // 创建图标对象
- var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
- // 指定定位位置。
- // 当标注显示在地图上时,其所指向的地理位置距离图标左上角各偏移10像素和25像素。您可以看到在本例中该位置即是图标中央下端的尖角位置。
- anchor: new BMap.Size(10, 25),
- // 设置图片偏移。
- // 当您需要从一幅较大的图片中截取某部分作为标注图标时,您需要指定大图的偏移位置,此做法与css sprites技术类似。
- imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移
- }); // 创建标注对象并添加到地图
- var marker = new BMap.Marker(point, { icon: myIcon });
- map.addOverlay(marker);
- // 定义一个控件类,即function
- function ZoomControl() {
- // 默认停靠位置和偏移量
- this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
- this.defaultOffset = new BMap.Size(10, 10);
- }
- //地图事件设置函数:
- map.enableDragging(); //启用地图拖拽事件,默认启用(可不写)
- map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
- map.enableDoubleClickZoom(); //启用鼠标双击放大,默认启用(可不写)
- map.enableKeyboard(); //启用键盘上下左右键移动地图
- // 通过JavaScript的prototype属性继承于BMap.Control
- ZoomControl.prototype = new BMap.Control();
- // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
- })
- },
- error: function (data) {
- alert('获取数据超时...');
- }
- });
- })
- </script>
Jquery 的百度地图应用
最新推荐文章于 2016-12-05 14:28:25 发布