百度地图 信息窗编写

文章来源 http://blog.csdn.net/sd0902/article/details/8471326

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

posted @ 2015-12-02 17:52  yangbanban123  阅读(206)  评论(0编辑  收藏  举报