您的位置：首页 > Web前端 > HTML

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

2013-08-15 18:17 477 查看

转载：http://blog.csdn.net/sd0902/article/details/8471322

[html] view
plaincopy

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航