您的位置:首页 > 数据库

百度地图显示标注,标注信息为数据库查询的数据

2014-06-10 11:21 417 查看
百度地图基本操作

<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);		//将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐