首页 > 代码库 > 百度地图Api进阶教程-创建标注和自定义标注3.html
百度地图Api进阶教程-创建标注和自定义标注3.html
<!DOCTYPE html><html><head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>11.1</title> <script type="text/javascript"> function initialize() { var map = new BMap.Map("container", { minZoom: 12, maxZoom: 25 }); 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 style="float: left; width: 100px;"> 1</div> <div id="container" style="width: 800px; height: 500px"> </div> <div id="r-result" style="float: left; width: 100px;"> 打印坐标</div> <div id="result"> </div></body></html>
百度地图Api进阶教程-创建标注和自定义标注3.html
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。