百度地图显示标注,标注信息为数据库查询的数据
2014-06-10 11:21
417 查看
百度地图基本操作
实现简单标注,以及标注上的点击事件
用for循环为标注添加鼠标点击事件
<pre class="javascript" name="code"> var map = new BMap.Map("allmap"); // 创建Map实例 var point = new BMap.Point(120.170507,30.276462); //以指定的经度和纬度创建一个地理点坐标,(创建坐标点) map.centerAndZoom(point, 11); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("杭州"); // 设置地图显示的城市 此项是必须设置的 map.centerAndZoom(point, 11); //对地图进行初始化。未进行初始化的地图将不能呢个进行任何操作。
var map = new BMap.Map("allmap"); // 创建Map实例 var point = new BMap.Point(120.170507,30.276462); //以指定的经度和纬度创建一个地理点坐标,(创建坐标点) map.centerAndZoom(point, 11); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("杭州"); // 设置地图显示的城市 此项是必须设置的 map.centerAndZoom(point, 11); //对地图进行初始化。未进行初始化的地图将不能呢个进行任何操作。
实现简单标注,以及标注上的点击事件
<script type="text/javascript"> var map = new BMap.Map("allmap"); // 创建Map实例 var point = new BMap.Point(120.170507,30.276462); //以指定的经度和纬度创建一个地理点坐标 map.centerAndZoom(point, 11); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 //map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom(); //启用滚轮放大缩小 //map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("杭州"); // 设置地图显示的城市 此项是必须设置的 map.centerAndZoom(point, 11); //对地图进行初始化。未进行初始化的地图将不能呢个进行任何操作。 //用给定的图像地址和大小创建图标对象实例 图像地址是相对于WebRoot,不需要加/,加了的话不能正确显示 var icon = new BMap.Icon('Map/pin.png', new BMap.Size(20, 32), { anchor: new BMap.Size(10, 30), //图标的定位点相对于图标左上角的偏移值 infoWindowAnchor: new BMap.Size(10, 0) //信息窗口开启位置相对于图标左上角的偏移值 }); var mkr = new BMap.Marker(new BMap.Point(120.170507,30.276462), {//创建一个图标实例 icon: icon }); var opts = { width : 200, // 信息窗口宽度 如果指定的宽度为0,则信息窗口的宽度将按照其内容自动调整 height: 0, // 信息窗口高度 如果指定的高度为0,则信息窗口的高度将按照其内容自动调整 title : "海底捞王府井店" , // 信息窗口标题 enableMessage:false//设置允许信息窗发送短息 //message:"亲耐滴,晚上一起吃个饭吧?戳下面的链接看下地址喔~" 这个是指短信内容 } var infoWindow = new BMap.InfoWindow("地址:北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象 mkr.addEventListener("click", function(){this.openInfoWindow(infoWindow);}); //在图标实例上添加鼠标点击事件 //添加鼠标点击事件也可简写为如下形式,可以方便在循环添加事件使用闭包的时候使用 //mkr.addEventListener("click", function(){this.openInfoWindow(new BMap.InfoWindow("地址:市东城区王府井大街88号乐天银泰百货八层",{width : 200,height: 0,title : "海底捞王府井店",enableMessage:false}));}); map.addOverlay(mkr); //将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次 </script>
用for循环为标注添加鼠标点击事件
var map = new BMap.Map("allmap"); // 创建Map实例 var point = new BMap.Point(120.170507,30.276462); //以指定的经度和纬度创建一个地理点坐标,(创建坐标点) map.centerAndZoom(point, 11); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("杭州"); // 设置地图显示的城市 此项是必须设置的 map.centerAndZoom(point, 11); //对地图进行初始化。未进行初始化的地图将不能呢个进行任何操作。
//用给定的图像地址和大小创建图标对象实例 图像地址是相对于WebRoot,不需要加/,加了的话不能正确显示
var icon = new BMap.Icon('Map/pin.png', new BMap.Size(20, 32), {
anchor: new BMap.Size(10, 30), //图标的定位点相对于图标左上角的偏移值
infoWindowAnchor: new BMap.Size(10, 0) //信息窗口开启位置相对于图标左上角的偏移值
});
for(var i=0;i<5;i++){
var mkr = new BMap.Marker(new BMap.Point(120.170507 + i / 20, 30.276462), {//创建一个图标实例
icon: icon
});
//循环添加标注点击事件后显示出来的文本信息框的信息 (为了使文本框信息不重复) 需要用到闭包,否则只会显示最后一个数据
(function(){
var index = i;
mkr.addEventListener("click", function(){
this.openInfoWindow(new BMap.InfoWindow("闭包二" + index, {width: 200,height: 0,title: "闭包一" + index,enableMessage: false}));
}); //在图标实例上添加鼠标点击事件
})();
map.addOverlay(mkr); //将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次
}
map = new BMap.Map("allmap"); // 创建Map实例 var point = new BMap.Point(120.170507,30.276462); //以指定的经度和纬度创建一个地理点坐标,(创建坐标点) map.centerAndZoom(point, 11); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("杭州"); // 设置地图显示的城市 此项是必须设置的 map.centerAndZoom(point, 11); //对地图进行初始化。未进行初始化的地图将不能呢个进行任何操作。 //用给定的图像地址和大小创建图标对象实例 图像地址是相对于WebRoot,不需要加/,加了的话不能正确显示 var icon = new BMap.Icon('Map/pin.png', new BMap.Size(20, 32), { anchor: new BMap.Size(10, 30), //图标的定位点相对于图标左上角的偏移值 infoWindowAnchor: new BMap.Size(10, 0) //信息窗口开启位置相对于图标左上角的偏移值 }); for(var i=0;i<5;i++){ var mkr = new BMap.Marker(new BMap.Point(120.170507 + i / 20, 30.276462), {//创建一个图标实例 icon: icon }); //循环添加标注点击事件后显示出来的文本信息框的信息 (为了使文本框信息不重复) 需要用到闭包,否则只会显示最后一个数据 (function(){ var index = i; mkr.addEventListener("click", function(){ this.openInfoWindow(new BMap.InfoWindow("闭包二" + index, {width: 200,height: 0,title: "闭包一" + index,enableMessage: false})); }); //在图标实例上添加鼠标点击事件 })(); map.addOverlay(mkr); //将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次 }
相关文章推荐
- 百度地图显示标注,标注信息为数据库查询的数据
- Java连接HBASE数据库,创建一个表,删除一张表,修改表,输出插入,修改,数据删除,数据获取,显示表信息,过滤查询,分页查询,地理hash
- 通过查询数据库中的数据匹配在页面上:(set单条数据属性是在页面上的显示与foreach的不同) 通过ID修改提取位置表信息
- VB.net 查询获取数据库数据信息
- 取出dataConfiguration.config里的数据,查询数据库中表的所有信息(如是否是主健等)
- 【百度地图API】建立全国银行位置查询系统(四)——如何利用百度地图的数据生成自己的标注
- Oracl数据库管理方面的资料(查询sga,查看oracle数据库名称sid,查看oracle数据库名称,查看表空间,修改表空间名称,数据库管理,sqlPlus数据显示)
- 百度地图API:如何查询数自己的数据库标注地图并让标注显示在最佳视野内
- 加载数据库表全部数据到GridView控件,但通过查询条件在GridView显示一行或几行数据
- 百度地图高级实例2-如何利用自己的数据制作社交地图?只显示可视区域内的标注
- 百度地图PAI:查询自己的数据库在页面显示,点击其中任一行在地图标注
- 百度地图PAI:查询自己的数据库在页面显示,点击其中任一行在地图标注
- 手动修改数据库的值,hibernate查询还没有显示修改数据原因补充
- Delphi(ADOConncction+ADOQuery+DataSoure+TListView)TListView显示数据库查询数据!!!--演示案例
- Swing编程中用于显示数据库查询结果的数据模型
- 从数据库里查询数据,显示在jsp的下拉列表框里
- ORACLE SQL 查询数据库 数据显示的格式设置
- django查询两个数据库来显示数据
- 【百度地图API】建立全国银行位置查询系统(四)——如何利用百度地图的数据生成自己的标注
- 百度地图之调用javaScript api接口实现多点标注及显示提示信息