var map = new BMap.Map("container"); // 创建地图实例
map.addControl(new BMap.NavigationControl());//地图控制插件,该插件可以控制地图的位置地图的显示比例
map.addControl(new BMap.ScaleControl());//显示在地图下方,告诉你地图上1cm对应的真实距离
//map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());//地图的显示类型:包括地图和卫星
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));//地图|混合
//创建地图函数:
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(113.263865,23.151257);//定义一个中心点坐标,这里是初始
化要显示的经度和纬度,可到http://openapi.baidu.com/map/createMap.html查看自己要显示的值。
map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数:
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
// 编写自定义函数,创建标注:
function addMarker(point, index) {
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移
});
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
}
//添加覆盖物:
//添加覆盖物
function addCoverObj(obj,flag){
var gc = new BMap.Geocoder();
var iconImg= new BMap.Icon("http://api.map.baidu.com/img/markers.png", new
BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移
});
var mypoint=new BMap.Point(obj.longitude_point, obj.dimensionality_point);
allpoints.push(mypoint);
var marker = new BMap.Marker(mypoint,{icon:iconImg});
var label = new BMap.Label(obj.car_num,{"offset":new BMap.Size(15,-15)});
label.setStyle({ //给label设置样式,任意的CSS都是可以的
//fontSize:"14px", //字号
border:"0", //边
height:"23px", //高度
width:"72px", //宽
textAlign:"center", //文字水平居中显示
lineHeight:"23px", //行高,文字垂直居中显示
background:"url(../images/mapicon/y_bg.png) no-repeat" //背景图片,这是房
产标注的关键!
//cursor:"pointer"
});
label.setStyle({"padding": "2px"});
// 如果子节点存在且数量大于1的显示数字
if(obj.count&&obj.count>0) {
var cids = obj.childrenIds;
if(flag==1){//运输公司
label = new BMap.Label(("<b><a style='text-decoration: none'
href='javascript:void(0);' οnclick='getCarListInRange("+obj.company_id+",
\""+obj.company_name+"\",\""+cids+"\")'> "+(obj.count
+1)+" </a></b>"),{"offset":new BMap.Size(25,-25)});
}else if(flag==2){//建筑工地
label = new BMap.Label(("<b><a style='text-decoration: none'
href='javascript:void(0);' οnclick='getCarListInBSRange(\""+cids
+"\")'> "+(obj.count+1)+" </a></b>"),{"offset":new BMap.Size(25,-
25)});
}else if(flag==3){//运行车辆
label = new BMap.Label(("<b><a style='text-decoration: none'
href='javascript:void(0);' οnclick='getCarListOnLineRange(\""+cids
+"\")'> "+(obj.count+1)+" </a></b>"),{"offset":new BMap.Size(25,-
25)});
}
label.setStyle({ //给label设置样式,任意的CSS都是可以的
//fontSize:"14px", //字号
border:"0", //边
height:"33px", //高度
width:"37px", //宽
textAlign:"center", //文字水平居中显示
lineHeight:"33px", //行高,文字垂直居中显示
background:"url(../images/mapicon/y.png) no-repeat" //背景图片,
这是房产标注的关键!
//cursor:"pointer"
});
}
//添加车牌标签
marker.setLabel(label);
label.setStyle({
borderColor:"#808080",
color:"#333"
//cursor:"pointer"
});
//添加监听
if(!obj.count||obj.count==0) {
marker.addEventListener("click",function(){
//this.openInfoWindow(createInfoWindow(obj));
// 存在子节点,显示列表(可链接到其他节点)
//获取地址信息
gc.getLocation(mypoint, function(rs){
showLocationInfo(marker,obj,rs);
});
});
}
//将标注添加到地图上
map.addOverlay(marker);
}
地图常用组件:
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 16); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.OverviewMapControl({isOpen:1})); //为地图添加鹰眼
//map.addControl(new BMap.NavigationControl()); //为地图添加鱼骨(默认)
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})); //为地图添加鱼骨(迷你型)
//map.addControl(new BMap.ScaleControl()); //添加一个带上偏移量的比例尺
map.addControl(new BMap.ScaleControl({offset: new BMap.Size(5, 40)})); //添加一个带上偏移量的比例尺
map.addControl(new BMap.MapTypeControl()); //为地图添加2D3D切换控件
map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用
var myCopyright = new BMap.CopyrightControl({offset: new BMap.Size(82, 0)}) //设置版权信息偏移量
map.addControl(myCopyright); //为地图添加版权控件
myCopyright.addCopyright({id : 1, content : '<a style="line-height:30px;height:30px;display:block;color:red;background:yellow" href="http:ic/img/uiico.ico" />酸奶小妹的博客园</a>'});
</script>
标签:map,常用,obj,地图,BMap,var,new,百度 From: https://blog.51cto.com/u_4427045/6238082