<!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. 大家来找茬：富连网今天中午抢购二手iPhone时网站无法访问的问题

    前几天在新闻区看到富士康卖二手iPhone的新闻,今天又看到说今天中午12点开抢.一大早就发现富连网无法访问了.前几天刚看到新闻的时候注册了个账号进去看了看,发现页面加载速度非常慢,今天中午基本无法打 ...

  2. ubuntu14.4.4安装smb服务实现文件共享

    1.软件安装,ubuntu14需要安装的软件有3个 安装服务前养成习惯 sudo apt-get upgrade 首先切换到超级用户  su - root sudo apt-get install s ...

  3. Linux vi/vim替换命令的使用说明[转]

    vi/vim 中可以使用 :s 命令来替换字符串.:s/vivian/sky/ 替换当前行第一个 vivian 为 sky:s/vivian/sky/g 替换当前行所有 vivian 为 sky:n, ...

  4. 将视频转换为 HLS(HTTP Live Streaming) 协议格式文件

    就是将视频文件转码(H264+ACC).分片(n个.ts文件).生成列表(.m3u8) 方便网站提供视频播放服务,提升加载速度,节省流量. 1.准备好源视频文件. 2.下载 ffmpeg(http:/ ...

  5. 【Android开发】Android Host详解（翻译自官方文档）

    原文:http://android.eoe.cn/topic/summary 文档内容 API概述 Android中manifest文件需求 工作的设备 * 发现设备 * 获得和设备进行“交流”的权限 ...

  6. pc客户端网页录音和压缩

    web录音的功能,也就是怎么使用 getUserMedia 音频上传 栗子中最后返回的是Blob数据 return new Blob([dataview], { type: type }) 因为对ht ...

  7. 深入浅出HTTPS基本原理

    基础知识准备:在了解HTTPS的基本原理之前,需要先了解如下的基本知识. 一.什么是HTTPS,TLS,SSL HTTPS,也称作HTTP over TLS.TLS的前身是SSL,TLS 1.0通常被 ...

  8. /etc/sudoers 配置

    /etc/sudoers ## Allow root to run any commands anywhere root ALL=(ALL) ALL #第一个root是用户账号 第二列的ALL是登陆者 ...

  9. markModified声明要修改的数组字段

    更新一个文档的字段的时候,如果该字段的类型是数组类型,则必须在更新保存前声明一下这个数组字段要被修改,否则这个数组字段的值不会被修改.如 article.markModified('categorys ...

  10. Android 视觉规范

    各种分辨率下图片尺寸 工程师通常开发三套UI布局文件,所以设计师通常也要不同的需求处理2-3套切图. con Type Standard Asset Sizes (in Pixels), for Ge ...