心得笔记网站首页 心得笔记

百度地图javascript接口开发-覆盖物

发布时间：2016-11-20 14:23:33编辑：雪饮阅读（）

<!doctype html>

<html>

<head>

<title>百度地图使用示例</title>

body,html,#allmap{

width:100%;height:100%;overflow:hidden;margin:0 auto;font-family:"微软雅黑";

}

</style>

BMap.Point.prototype.toString=function(){

return "经度="+this.lng+"纬度="+this.lat;

}

function InitMap(){

//百度api功能

var map=new BMap.Map("allmap");

var point=new BMap.Point(104.06,30.67);//成都经纬度生成的点

map.centerAndZoom(point,15); // 初始化地图，设置中心点坐标和地图级别

//添加标记

//创建小图标

var myIcon=new BMap.Icon("icon.jpg",new BMap.Size(88,79),{anchor:new BMap.Size(20,20),imageOffset:new BMap.Size(0,0)});

var markerOptions={

enableMassClear:false,//设置标记禁止移除参数

enableDragging:true,//设置标记是否允许拖动

enableClicking:true,//设置标记点击事件开启，当值为false时则该标记的点击事件是禁用的

raiseOnDrag:true,//设置标记被拖动后标记的抖动效果

draggingCursor:"wait",//设置标记被选中样式

rotation:90,//设置标记旋转角度

title:"这是一个标注",//设置标注被鼠标悬停时的提示信息

icon:myIcon,

};

var point2=new BMap.Point(104.06,30.67);

var marker=new BMap.Marker(point2,markerOptions);

marker.addEventListener("click",function(event){

alert("被单击了");

//event对参数返回一个对象，对象中包含标记当前位置的坐标

console.log(event.type,event.target);

});

//添加菜单

var menuItem1=new BMap.MenuItem("菜单1",function(){

//弹出当前经纬度

alert(marker.getPosition());

});

var menuItem2=new BMap.MenuItem("菜单2",function(){

alert("你点击了菜单2");

});

var contextMenu=new BMap.ContextMenu();

contextMenu.addItem(menuItem1);

contextMenu.addItem(menuItem2);

marker.addContextMenu(contextMenu);

//菜单添加结束

//标记添加结束

//清除标记

//map.clearOverlays();

var opts={

width:250,//信息窗口宽度

height:50,//信息窗口高度

title:"hello",

enableAutoPan:true,//是否开启信息窗口打开时地图自动移动

enableMessage:true,//是否在信息窗里显示短信发送按钮（默认开启），经测试是1.5版本特有好像，2.0上设置无效

}

var infoWindow=new BMap.InfoWindow("您好，欢迎来到成都",opts);//创建信息窗口对象

infoWindow.setContent("成都欢迎你");

infoWindow.setTitle("欢迎光临");

map.addOverlay(marker);

marker.openInfoWindow(infoWindow);

}

</script>

</head>

</body>

</html>

关键字词：百度地图api,javascript

上一篇：百度地图javascript接口开发-地图控件

下一篇：百度地图javascript接口开发-自定义覆盖物

您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记

百度地图javascript接口开发-覆盖物

相关文章

您当前的位置：首页 > 学无止境 > 心得笔记网站首页心得笔记