<!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. mysql group replication 主节点宕机恢复

    一.mysql group replication 生来就要面对两个问题: 一.主节点宕机如何恢复. 二.多数节点离线的情况下.余下节点如何继续承载业务. 在这里我们只讨论第一个问题.也就是说当主结点 ...

  2. Shiro系列(2) - 权限模型以及权限分配的两种方式

    1. 顶级账户分配权限用户需要被分配相应的权限才可访问相应的资源.权限是对于资源的操作一张许可证.给用户分配资源权限需要将权限的相关信息保存到数据库.这些相关内容包含:用户信息.权限管理.用户分配的权 ...

  3. [na]TCP的三次握手四次挥手/SYN泛洪

    1.TCP报文格式 上图中有几个字段需要重点介绍下: (1)序号:Seq序号,占32位,用来标识从TCP源端向目的端发送的字节流,发起方发送数据时对此进行标记. (2)确认序号:Ack序号,占32位, ...

  4. 深入理解Linux内核－系统调用

    系统调用:用户态进程向内核发出的,实现用户态进程调用硬件设备的函数或者中断:优点:使编程更容易,将用户从学习硬件设备的低级编程特性中解放:提高系统到安全性,内核在满足请求之前可以做正确性检查:提高可移 ...

  5. Hive怎样加入第三方JAR

    以增加elsaticsearch-hadoop-2.1.2.jar为例,讲述在Hive中增加第三方jar的几种方式. 1,在hive shell中增加 [hadoop@hadoopcluster78 ...

  6. 添加多个CCArmature

    CCArmatureDataManager::sharedArmatureDataManager()-> addArmatureFileInfo("armature\\Cowboy0. ...

  7. android笔记--加载框

    package com.fuda.ui; import android.app.Activity; import android.os.Bundle; import android.os.Handle ...

  8. Lua官方文档与源码分析

    https://www.lua.org/source/5.3/ http://www.cppblog.com/airtrack/archive/2012/09/19/191233.html https ...

  9. raft Paxos

    CONSENSUS: BRIDGING THEORY AND PRACTICE https://ramcloud.stanford.edu/~ongaro/thesis.pdf https://web ...

  10. golang遇到的win下读取txt字符乱码的问题

    import ( "encoding/csv" "os" "github.com/axgle/mahonia" ) // GetCSV 读取 ...