<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:70%}#container{width:50%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> </head> <body> <br><br><br><br><br>百度地图接口 -- 总结<br><br><div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container"); // 创建地图实例
//通过经纬度坐标来初始化地图var point = new BMap.Point(125.4360909,43.78802888999); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
//通过城市名称来初始化地图//map.centerAndZoom("长春");
var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放 map.enableKeyboard(); // 开启键盘控制 map.enableContinuousZoom(); // 开启连续缩放效果 map.enableInertialDragging(); // 开启惯性拖拽效果
map.addControl(new BMap.NavigationControl()); //添加标准地图控件(左上角的放大缩小左右拖拽控件)map.addControl(new BMap.ScaleControl()); //添加比例尺控件(左下角显示的比例尺控件)map.addControl(new BMap.OverviewMapControl()); // 缩略图控件map.addControl(new BMap.MapTypeControl()); 仅当设置城市信息时，MapTypeControl的切换功能才能可用map.setCurrentCity("北京"); map.setCurrentCity("吉林省");
//添加自定义控件
// 定义一个控件类，即function function ZoomControl(){ // 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffset = new BMap.Size(50, 10); } // 通过JavaScript的prototype属性继承于BMap.Control ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回 // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中 ZoomControl.prototype.initialize = function(map){ // 创建一个DOM元素 var div = document.createElement("div"); // 添加文字说明 div.appendChild(document.createTextNode("长春工业大学人文信息学院")); // 设置样式 div.style.cursor = "pointer"; div.style.border = "1px solid gray"; div.style.backgroundColor = "white"; // 绑定事件，点击一次放大两级 div.onclick = function(e){ alert("长春工业大学人文信息学院"); } // 添加DOM元素到地图中 map.getContainer().appendChild(div); // 将DOM元素返回 return div; }
// 创建控件实例 var myZoomCtrl = new ZoomControl(); // 添加到地图当中 map.addControl(myZoomCtrl);
//添加信息窗口var opts = { width : 200, // 信息窗口宽度 height: 70, // 信息窗口高度 title : "长春工业大学人文信息学院" // 信息窗口标题 } var infoWindow = new BMap.InfoWindow("您好，欢迎来到长春工业大学人文信息学院", opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
</script> </body> </html>运行效果图
转载于:https://www.cnblogs.com/hzhmvc/p/6656587.html
相关资源：利用百度地图api定位 支持基站 GPS地位