首页 > 代码库 > 百度地图Api进阶教程-弹出信息窗口5.html
百度地图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://www.mamicode.com/‘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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。