<!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. jmeter 正则获取参数集合和ForEach控制器结合使用

    怎么把第一个请求获取的返回的多个id,在第二个请求中逐个以单个id作为请求参数来请求? 为了解决这个问题,模拟下该场景 1.请求www.163.com 主页,获取响应中的所有数字,这个获取的数字集合暂 ...

  2. CentOS 安装Mosquitto及测试

    系统信息,阿里云服务器 安装工具 yum install gcc gcc-c++ yum install openssl-devel yum install c-ares-devel yum inst ...

  3. unity, 在材质上指定render queue

    材质球inspector面板在debug模式下可以看到Custom Render Queue一项: 其默认值为-1,表示使用相应shader的render queue设置. 也可以人为将其改为其它值, ...

  4. Spark-Sql之DataFrame实战详解

    1.DataFrame简介: 在Spark中,DataFrame是一种以RDD为基础的分布式数据据集,类似于传统数据库听二维表格,DataFrame带有Schema元信息,即DataFrame所表示的 ...

  5. 禁用 Windows 启动时错误恢复的“启动启动修复（推荐）”

    bcdedit /set {default} bootstatuspolicy ignoreallfailures bcdedit /set {current} recoveryenabled No

  6. 如何运行你的Android程序？

    原文链接:http://android.eoe.cn/topic/android_sdk 本文中你将了解到: 1. 在真机上运行App 2. 在模拟器上运行App 你还应该阅读: 1. Using H ...

  7. 快学Scala习题解答—第四章 映射和元组

    4 映射和元组  4.1 设置一个映射,当中包括你想要的一些装备,以及它们的价格.然后构建还有一个映射.採用同一组键,可是价格上打9折 映射的简单操作  ,"gun"->18 ...

  8. 关于的 recorder robotium 的Eclipse插件（URL:http://recorder.robotium.com/updates/或者说不可用）

    最近在学robotium.看到别人说robotium的Eclipse的插件非常好用. 打算安装时.发现死活都无法连接http://recorder.robotium.com/updates/ 过程是  ...

  9. 分布式系统的那些事儿（四） - MQ时代的通信

    之前在讲RPC通信的各种好处,特别好用,但是RPC并不是万能的,也并不是适用于各种场景的,因为他是同步的:现如今很多场景下的调用都是异步的,系统A调用B后,并不需要知道B的结果,而且对B的结果无所谓, ...

  10. 文档 - STOMP Over WebSocket

    http://jmesnil.net/stomp-websocket/doc/ What is STOMP? STOMP is a simple text-orientated messaging p ...