<!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>13.1</title>

    <script type="text/javascript">

        function initialize() {

            var map = new BMap.Map("container", { minZoom: 12, maxZoom: 25 });

            map.centerAndZoom("成都", 13);

            map.enableScrollWheelZoom(true);

            //---------------------------------------------信息窗口(地图上由此只有1个)--------------------------------------------

            var sContent =

"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" +

"<img style='float:right;margin:4px' id='imgDemo' src='http://avatar.csdn.net/4/7/8/1_sd0902.jpg' width='139' height='104' title='天安门'/>" +

"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +

"</div>";

            var point = new BMap.Point(104.017287, 30.685906);

            var infoWindow = new BMap.InfoWindow(sContent);

            map.openInfoWindow(infoWindow, point);

            //---------------------------------------------创建标注---------------------------------------------

            var point = new BMap.Point(104.117287, 30.685906);

            var marker = new BMap.Marker(point);

            //添加点击事件

            var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>哈哈，你看见我啦！我可不常出现哦！</p><p style='font-size:14px;'>看看我是如何添加上来的！</p>");

            marker.addEventListener("click", function () {

                this.openInfoWindow(infoWindow);

            });

            map.addOverlay(marker);

        }

        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进阶教程-弹出信息窗口5.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进阶教程-地图鼠标左右键操作实例和鼠标样式6.html

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

  6. 百度地图Api进阶教程-创建标注和自定义标注3.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. C#中三种弹出信息窗口的方式

    弹出信息框,是浏览器客户端的事件.服务器没有弹出信息框的功能. 方法一: asp.net页面如果需要弹出信息框,则需要在前台页面上注册一个javascript脚本,使用alert方法.使用Client ...

随机推荐

  1. cent os 6.5+ambari+HDP集群安装

    1. 搭建一个测试集群,集群有4台机器,配置集群中每一台机器的/etc/hosts文件: [root@nn .ssh]# cat /etc/hosts 127.0.0.1 localhost loca ...

  2. 深入理解Linux内核－进程

    1.进程的静态特性 进程:程序执行时的一个实例 进程描述符(task_struct): 进程的基本信息(thread_info).指向内存区描述符的指针(mm_struct).进程相关的tty(tty ...

  3. Android面试、开发之高手 编码规范与细节

    凝视 [规则1]必须用 javadoc 来为类生成文档.不仅由于它是标准.这也是被各种java 编译器都认可的方法. [规则2]在文件的開始部分应该有文件的说明信息,应包括例如以下信息: (1)版权信 ...

  4. mysql中tinyint、smallint、int、bigint的区别

    tinyint 从 -2^7 (-128) 到 2^7 - 1 (123) 的整型数据.存储大小为 1 个字节. unsigned 是从 0 到 255 的整型数据. 所以建表的时候 只能是tinyi ...

  5. Gitlab日常备份和恢复

    按照官方安装文档安装完成之后的/home/git目录结构如下,这里我大致翻译官方的内容,部分加上自己的话,英语功力捉急,请见谅 |-- home | |-- git | |-- .ssh | |-- ...

  6. 添加Fragment报已有父view，需先移除的错

    错误LOG: 12-13 17:05:28.754: E/AndroidRuntime(8344): FATAL EXCEPTION: main 12-13 17:05:28.754: E/Andro ...

  7. Up and running with Apache Spark on Apache Kudu

    After the GA of Apache Kudu in Cloudera CDH 5.10, we take a look at the Apache Spark on Kudu integra ...

  8. Effective Spark RDDs with Alluxio【转】

    转自:http://kaimingwan.com/post/alluxio/effective-spark-rdds-with-alluxio 1. 介绍 2. 引言 3. Alluxio and S ...

  9. 【驱动】input子系统全面分析

    初识linux输入子系统 linux输入子系统(linux input subsystem)从上到下由三层实现,分别为:输入子系统事件处理层(EventHandler).输入子系统核心层(InputC ...

  10. Vue2键盘事件：keydown/keyup...

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...