百度地图Api进阶教程-创建标注和自定义标注3.html

2022-06-21 05:54:42
<!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>
码农公寓

相关文章
