您的位置：首页 > Web前端 > HTML

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

2013-08-15 18:23 316 查看

转载： http://blog.csdn.net/sd0902/article/details/8471326

[html] view
plaincopy

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>百度地图</title>





<script type="text/javascript">

    var iscreatr=false;

    function initialize() {

        //---------------------------------------------基础示例---------------------------------------------

        var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例

        //map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时，即可设置中心点和地图缩放级别。

        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);

        map.addOverlay(marker);





        //---------------------------------------------点击标注弹出信息窗口---------------------------------------------

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



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

            this.openInfoWindow(infoWindow);

        });



    }



    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 id="r-result" style="float:left;width:100px;">打印坐标</div>

    <div id="allmap" style="width: 800px; height: 500px"></div>

</body>

</html>



<script type="text/javascript">

    // 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));

     // map.setZoom(14);   //放到到14级

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航