百度地图JS--2
转载请注明出处
本文为原创
作者:injuer
严禁用于商业用途,仅学习交流
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#container{
width:100%;
height:100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=*******"></script>
</head> <body>
<div id="container"></div>
</body>
<script type="text/javascript">
var extMap = {
load : function(data, controls){
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(data.lng, data.lat), 12);
if(null != controls){
for(var i = 0; i < controls.length; i++){
map.addControl(controls[i]);
}
}
return map;
},
addData : function(map,data){
var marke = null;
var label = null;
var temp = null;
for(var i = 0; i < data.length; i++){
temp = data[i];
marke = new BMap.Marker(new BMap.Point(temp.lng, temp.lat));
marke.setTitle(temp.title);
if(null != temp.icon && "" != temp.icon){
marke.setIcon(new BMap.Icon(temp.icon, new BMap.Size(temp.icon_width, temp.icon_height)));
}
this.addMenu(marke, temp);
this.addMarkerEventListener(map, marke, temp);
this.addLabel(map, marke, temp);
}
return map;
},
addMenu : function(marke, data){
var ms = data.menu;
var m = null;
m = new BMap.ContextMenu();
for(var i = 0; i < ms.length; i++){
m.addItem(new BMap.MenuItem(ms[i].root, ms[i].fun));
}
marke.addContextMenu(m);
},
addMarkerEventListener : function(map, marke, data){
marke.addEventListener("click", function(event){
var w = extMap.createWindow(data);
marke.openInfoWindow(w);
});
map.addOverlay(marke);
},
addLabel : function(map, marke, data){
label = new BMap.Label(data.text);
label.setPosition(new BMap.Point(data.lng - 0.5 / 1000, data.lat));
label.show();
map.addOverlay(label);
},
createWindow : function(data){
var w = new BMap.InfoWindow(data.des, {
height : 0,
maxWidth : 0,
title : data.title,
enableMessage : true,
message : data.msg
});
return w;
}
} var data = new Array(); for(var i = 0; i < 3; i++){
data.push({
lng : 102.711 + (i /1000),
lat : 25.05 + (i /1000),
icon : null,
text : "这是内容" + i,
title : "<h5>这是标题</h5>" + i,
des : "这是描写叙述" + i,
msg : "这是短信" + i,
icon_width : 0,
icon_height : 0,
menu : [
{
root : "根文件夹0",
fun : function(){
alert("点击了根文件夹0");
},
},
{
root : "根文件夹1",
fun : function(){
alert("点击了根文件夹1");
}
},
{
root : "根文件夹2",
fun : function(){
alert("点击了根文件夹2");
}
}
]
});
} var map = extMap.addData(extMap.load(data[0], [
new BMap.ScaleControl(),
new BMap.OverviewMapControl(),
new BMap.NavigationControl()
]), data); </script>
</html>
百度地图JS--2的更多相关文章
- 百度地图--JS版
百度地图JS版本 ----选择关键字地图展示对应地址---- CSS body, html { width: %; height: %; margin: ; font-family: "微软 ...
- 外部引入的js 判断js脚本加载是否完成,完成后执行 相应的动作(以引入百度地图js为例)
可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...
- 百度地图js根据经纬度定位和拖动定位点
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- 百度地图js版定位控件
一 概述 百度地图在最新版已加入浏览器定位控件,个人认为应该是既高德地图更新了一个浏览器也能定位功能后,百度不甘落后自己简简单单,草草写了个这个功能的定位控件 GeolocationControl 这 ...
- 百度地图JS API不能使用position:fixed
用于放置百度地图的dom元素及其任何一级父元素设置position:fixed属性时,js会报如下错误: Uncaught TypeError: Cannot read property 'offse ...
- 百度地图js lite api 支持点聚合
百度地图lite api 是专门为h5 绘制海量点设计的,但是偏偏忽略掉了点聚合的需求,所以需要自己动手,做一次二次改造. 我们知道点聚合需要引入开源库: MarkerClusterer: http ...
- 百度地图js小结
1.获取javascript API 服务方法,首先申请密钥(ak),才可成功载入APIJS文件. 用法例如以下: <script type="text/javascript" ...
- 百度地图 JS API开发Demo01
百度地图DEMO <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- 关于百度地图js api的getCurrentPosition定位不准确的解决方法
很久之前帮大叔解决了一个gps坐标转换为百度地图坐标的问题.今天大叔又给我讲百度地图定位不准.我查了一下api,用了官方给出的这样一组函数. //创建查询对象 var geolocation = ne ...
- 百度地图 js api 实现 line 居中显示
项目中有个需求需要在百度地图的中心显示画的线,以前用过mapPanto这个方法,传入坐标就可以将地图平移到这个坐标,不过不知道如何获取线的中心点,看了别人的代码,有以下两个函数可以实现这个功能 get ...
随机推荐
- Xamarin Android项目提示SDK版本太老
Xamarin Android项目提示SDK版本太老 错误信息:The installed Android SDK is too old.Version 24.3.4 or newer is requ ...
- Codeforces 449D Jzzhu and Numbers(高维前缀和)
[题目链接] http://codeforces.com/problemset/problem/449/D [题目大意] 给出一些数字,问其选出一些数字作or为0的方案数有多少 [题解] 题目等价于给 ...
- 【费用流】hdu5988 Coding Contest
从源点向每个点连接容量为该点人数,费用为1的边, 把原图中的每条边拆成两条,一条容量为1,费用为1,另一条容量为ci-1,费用为1-pi 从每个点向汇点连接容量为该点面包数量,费用为1的边. 跑的费用 ...
- 【二分】Codeforces Round #404 (Div. 2) C. Anton and Fairy Tale
当m>=n时,显然答案是n: 若m<n,在第m天之后,每天粮仓减少的量会形成等差数列,只需要二分到底在第几天,粮仓第一次下降到0即可. 若直接解不等式,可能会有误差,需要在答案旁边扫一下. ...
- 初识Tomcat系统架构
俗话说,站在巨人的肩膀上看世界,一般学习的时候也是先总览一下整体,然后逐个部分个个击破,最后形成思路,了解具体细节,Tomcat的结构很复杂,但是 Tomcat 非常的模块化,找到了 Tomcat最核 ...
- Java学习笔记(8)
static修饰方法(静态的成员方法): 访问方式: 可以使用对象进行访问 对象.静态函数名(): 可以使用类名进行访问 类名. ...
- fastjson生成json时Null属性不显示的解决方法
举个例子 Map < String , Object > jsonMap = new HashMap< String , Object>(); jsonMap.put(&quo ...
- 20172333 2017-2018-2 《Java程序设计》第4周学习总结
20172333 2017-2018-2 <Java程序设计>第4周学习总结 教材学习内容 1.类结构的定义与概念 2.利用实例数据建立对象状态的概念 3.描述可见性修饰符作用在方法和数据 ...
- Codeforces Round #345 (Div. 2) D. Image Preview 暴力 二分
D. Image Preview 题目连接: http://www.codeforces.com/contest/651/problem/D Description Vasya's telephone ...
- Manthan, Codefest 16 B. A Trivial Problem 二分 数学
B. A Trivial Problem 题目连接: http://www.codeforces.com/contest/633/problem/B Description Mr. Santa ask ...