百度地图Api进阶教程-创建标注和自定义标注3.html
来源：互联网 发布：数据正态分布说明什么 编辑：程序博客网 时间：2024/05/08 04:51
<!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>
