<!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的更多相关文章

  1. 百度地图Api进阶教程-点击生成和拖动标注4.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 百度地图Api进阶教程-实例高级操作8.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 百度地图Api进阶教程-基础地图示例1.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 百度地图Api进阶教程-弹出信息窗口5.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  6. 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  7. 百度地图Api进阶教程-默认控件和自定义控件2.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  8. 百度地图Api进阶教程-点聚合9.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 【百度地图API】情人节求爱大作战——添加标注功能

    原文:[百度地图API]情人节求爱大作战--添加标注功能 任务描述: 2月2日是除夕,2月14立马来!即将到来的情人节,你想送TA一份什么礼物呢? 不如,在你们居住的地方,画个大大的桃心,表达你对TA ...

随机推荐

  1. U811.1接口EAI系列之一--通用把XML传送给EAI处理方法--PowerBuilder语言

    1.前面配置参考:http://www.cnblogs.com/spring_wang/p/3393147.html 2.pb通用调EAI方法代码如下: //===================== ...

  2. ext: gridpanel中的点击事件的参数是什么意思？

    listeners: {      // 当用户单击列表项时激发该函数      itemclick: function(view, record, item, index, evt)  //①    ...

  3. Django--middleware 详解

    面对的问题: 当我们的一个网站上线后有可能遇到一些恶意的访问.比如来自对手的web爬虫:我看过一些lowB的对手,它们IP地址都不换一个的,也不 在行为上做伪装. 1.可行方法一: 在每一个view中 ...

  4. TCP/IP 三次握手，温故知新

    今天看网络编程.又又一次看了一遍三次握手.曾经只知道连接有三次握手.今天发现原来断开也有三次握手. 三次握手:指通信两方彼此交换三次信息. 三次握手是在存在数据报丢失.反复和延迟的情况下,确保通信两方 ...

  5. 从头开始学习vue-router

    一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题. ...

  6. JavaWEB springmvc 使用定时任务

    1.配置web.xml 在web.xml配置使用springmvc框架,其他配置略. <display-name>xxx.com</display-name> <!-- ...

  7. angular-1.3 之ng-model-options指令

    ng-model-options是angular-1.3新出的一个指令,这篇文章就来介绍这个指令的用法. ng-model-options允许我们控制ng-model何时进行同步. 比如:1.当某个确 ...

  8. 【MySQL】MySQL层级数据的递归遍历

    层级的业务数据在系统中很常见,如组织机构.商品品类等. 如果要获取层级数据的全路径,除了缓存起来,就是递归访问的方式了: 将层级数据缓存在redis中,用redis递归获取层级结构.此方法效率高. 在 ...

  9. 【linux排错】"error while loading shared libraries: xxx.so.x" 错误的原因和解决办法

    一般我们在Linux下执行某些外部程序的时候可能会提示找不到共享库的错误, 比如: lcw: error : cannot open shared object file: No such file ...

  10. 【Cmd】批处理

    小续 看了下时间,10年写的了 批处理是个很强大的东西,现在任何一个工具都包含这个功能,只是被工具给封闭起来了 怀念下dos时代的批处理啊 rem即高级语言中的注释的意思,能看懂每个程序的作用了吧 @ ...