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

<!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>
时间: 2024-08-07 08:39:20

百度地图Api进阶教程-弹出信息窗口5.html的相关文章

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>16.1</title> <script type=text/javascript src=http://fw.qq.com/ipaddress></script&g

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;} #l-map{

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度地图</title> <script type="text/javascript"> function initialize() { var map

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

<!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>1

百度地图Api进阶教程-创建标注和自定义标注3.html

<!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>1

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

<!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>1

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;

百度地图API JavaScript显示人员分布信息

效果图贴下: js代码贴下: <body> <div id="div-map"></div></body></html><script type="text/javascript">$(function(){ // 百度地图API功能 var map = new BMap.Map("div-map"); map.centerAndZoom(new BMap.Point(106

C#中三种弹出信息窗口的方式

弹出信息框,是浏览器客户端的事件.服务器没有弹出信息框的功能. 方法一: asp.net页面如果需要弹出信息框,则需要在前台页面上注册一个javascript脚本,使用alert方法.使用ClientScript.RegisterStartupScript( )方法注册脚本. ClientScript.RegisterStartupScript( ) RegisterStartupScript(type,key,script) type:脚本事件的类型,一般用this.GetType()获取 k