百度地图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>
百度地图Api进阶教程-弹出信息窗口5.html的更多相关文章
- 百度地图Api进阶教程-点击生成和拖动标注4.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图Api进阶教程-实例高级操作8.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图Api进阶教程-基础地图示例1.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图Api进阶教程-创建标注和自定义标注3.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图Api进阶教程-默认控件和自定义控件2.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图Api进阶教程-点聚合9.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- C#中三种弹出信息窗口的方式
弹出信息框,是浏览器客户端的事件.服务器没有弹出信息框的功能. 方法一: asp.net页面如果需要弹出信息框,则需要在前台页面上注册一个javascript脚本,使用alert方法.使用Client ...
随机推荐
- UI控件篇——UIPageControl及其自定义
UIPageControl类提供一行点来指示当前显示的是多页面视图的哪一页.当然,由于UIPageControl类可视样式的点击不太好操作,所以最好是确保再添加了可选择的导航选项,以便让页面控件看起来 ...
- 用Power BI观察经济与健康的关系
Hans Rosling是卡罗琳学院的国际卫生学教授.这位学者与众不同的技能是数据可视化.以直观的数据展现了令人信服的世界观,而且在gapminder.org提供无偿展示以及下载.假设你没有看过下面的 ...
- Python 父目录获取
# coding=utf-8import os currentPath = os.getcwd() # 当前目录parent_path = os.path.dirname(currentPath) # ...
- 不错位的java .class 反编译工具推荐
我们经常会反编译看一些class文件,但是反编译出来的文件里面会有很多杂乱的东西 一直以来都是用的idea来反编译的,只要把class文件往里面一拖就行了 这么用没问题,用来看看源码什么的都OK 但是 ...
- Unity预计算全局光照的学习(速度优化,LightProbe,LPPV)
1.基本参数与使用 1.1 常规介绍 使用预计算光照需要在Window/Lighting面板下找到预计算光照选项,保持勾选预计算光照并保证场景中有一个光照静态的物体 此时在编辑器内构建后,预计算光照开 ...
- iOS安全攻防(十八):数据保护API
数据保护API 题外话 开篇先扯几句题外话,许多朋友都问我怎么不写防啊,我确实有点犹豫.hackers总是想象如果自己是开发者会怎么写,然后才能找到入手点.同理,开发者们也要想象自己是hackers会 ...
- 【iOS XMPP】使用XMPPFramewok(一):添加XMPPFramework(XCode 4.6.2)
转自:http://www.cnblogs.com/dyingbleed/archive/2013/05/09/3069145.html XMPPFramework GitHub: https://g ...
- ZOJ Problem Set - 1004-Anagrams by Stack
唉!先直接上源码吧!什么时候有时间的再来加说明. #include<iostream> #include<vector> #include<stack> #i ...
- FFmpeg编译: undefined reference to 'av_frame_alloc()'
今天使用CMake编译FFmpeg的时候,死活编不过,提示什么“undefined reference to 'av_frame_alloc()” 后来仔细查找,发现是头文件包含错误. 错误的代码: ...
- Gartner 2018新技术成熟度曲线
https://blog.csdn.net/BtB5e6Nsu1g511Eg5XEg/article/details/82047719 近日,Gartner发布了2018年新技术成熟度曲线,首次将生物 ...