转载:http://blog.csdn.net/sd0902/article/details/8471322
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>百度地图</title>
- <script type="text/javascript">
- function initialize() {
- //---------------------------------------------基础示例---------------------------------------------
- var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20}); // 创建Map实例
- //map.centerAndZoom(new BMap.Point(116.4035,39.915),15); //初始化时,即可设置中心点和地图缩放级别。
- map.centerAndZoom("成都",13); // 初始化地图,设置中心点坐标和地图级别。
- map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动
- map.addEventListener("click", function(e){
- document.getElementById("r-result").innerHTML = e.point.lng + ", " + e.point.lat;
- });
- //---------------------------------------------遮盖物---------------------------------------------
- var point = new BMap.Point(104.117287, 30.685906);//默认
- // 创建标注对象并添加到地图
- var marker = new BMap.Marker(point);
- map.addOverlay(marker);
- var point = new BMap.Point(104.057287, 30.685906);//图片
- var myIcon = new BMap.Icon("http://t3.baidu.com/it/u=1119318591,884730191&fm=0&gp=0.jpg", new BMap.Size(55, 55));
- // 创建标注对象并添加到地图
- var marker = new BMap.Marker(point, {icon: myIcon});
- map.addOverlay(marker);
- //自定义遮盖物
- // 定义自定义覆盖物的构造函数
- var point = new BMap.Point(104.117287, 30.695906);//自定义遮盖物
- function SquareOverlay(point, length, color){
- this._point = point;
- this._length = length;
- this._color = color;
- }
- // 继承API的BMap.Overlay
- SquareOverlay.prototype = new BMap.Overlay();
- // 实现初始化方法
- SquareOverlay.prototype.initialize = function(map){
- // 保存map对象实例
- this._map = map;
- // 创建div元素,作为自定义覆盖物的容器
- var div = document.createElement("div");
- div.style.position = "absolute";
- // 可以根据参数设置元素外观
- div.style.width = this._length + "px";
- div.style.height = this._length + "px";
- div.style.background = this._color;
- // 将div添加到覆盖物容器中
- map.getPanes().markerPane.appendChild(div);
- // 保存div实例
- this._div = div;
- // 需要将div元素作为方法的返回值,当调用该覆盖物的show、
- // hide方法,或者对覆盖物进行移除时,API都将操作此元素。
- return div;
- }
- // 实现绘制方法 (您需要在draw方法中设置覆盖物的位置,每当地图状态发生变化(比如:位置移动、级别变化)时,API都会调用覆盖物的draw方法,用于重新计算覆盖物的位置)
- SquareOverlay.prototype.draw = function(){
- var position = map.pointToOverlayPixel(this._point);
- this._div.style.left = position.x - this._length / 2 + "px";
- this._div.style.top = position.y - this._length / 2 + "px";
- }
- // 实现显示方法
- SquareOverlay.prototype.show = function(){
- if (this._div){
- this._div.style.display = "";
- }
- }
- // 实现隐藏方法
- SquareOverlay.prototype.hide = function(){
- if (this._div){
- this._div.style.display = "none";
- }
- }
- // 添加自定义覆盖物
- var mySquare = new SquareOverlay(point, 22, "red");
- map.addOverlay(mySquare);
- }
- function loadScript() {
- var script = document.createElement("script");
- script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
- document.body.appendChild(script);
- }
- window.onload = loadScript;
- </script>
- </head>
- <body>
- <div id="r-result" style="float:left;width:100px;">打印坐标</div>
- <div id="allmap" style="width: 800px; height: 500px"></div>
- </body>
- </html>
- <script type="text/javascript">
- // 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));
- // map.setZoom(14); //放到到14级
- </script>