百度地图 操作步骤

Posted 2021-03-17 alizhi

1、拾取坐标

http://api.map.baidu.com/lbsapi/getpoint/index.html

2、API

http://lbsyun.baidu.com/jsdemo.htm#a5_2

3、实例

function fillbaiduMap(data){
　　var tree = $(‘#select‘).combotree(‘tree‘);
　　var node = tree.tree(‘getSelected‘);
　　// 百度地图API功能
　　var map = new BMap.Map("allmap"); // 创建Map实例,
　　//美的
　　for(var i = 0;i<data.length;i++){
　　　　if(data[i][3] !="" && data[i][4] !=""){
　　　　　　if(data[i][1] == node.text){
　　　　　　　　var point = new BMap.Point(data[i][3],data[i][4]);
　　　　　　　　map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
　　　　　　}
　　　　　　var markermd = new BMap.Marker(new BMap.Point(data[i][3],data[i][4])); // 创建标注
　　　　　　var mdTitle = new BMap.Label(data[i][1], {
　　　　　　　　position : new BMap.Point(data[i][3],data[i][4]), // 指定文本标注所在的地理位置
　　　　　　　　offset : new BMap.Size(30, -30) //设置文本偏移量
　　　　　　}); // 创建文本标注对象
　　　　　　mdTitle.setStyle({
　　　　　　color : "#fff",
　　　　　　fontSize : "12px",
　　　　　　height : "20px",
　　　　　　lineHeight : "20px",
　　　　　　fontFamily:"微软雅黑",
　　　　　　borderColor:"rgba(22,83,120,0.5)",
　　　　　　backgroundColor:"rgba(22,83,120,0.7)"
　　　　});
　　　　map.addOverlay(mdTitle); 
　　　　map.addOverlay(markermd); 
　　　　(function(i){
　　　　　　var mdinfo = {
　　　　　　　　width : 300, // 信息窗口宽度
　　　　　　　　height: 60, // 信息窗口高度
　　　　　　　　title : data[i][1] , // 信息窗口标题
　　　　　　　　enableMessage:true//设置允许信息窗发送短息
　　　　　　}
　　　　　　var infoWindow = new BMap.InfoWindow("用电量："+data[i][2]+"kWh", mdinfo); // 创建信息窗口对象 
　　　　　　markermd.addEventListener("click", function(){ 
　　　　　　map.openInfoWindow(infoWindow,new BMap.Point(data[i][3],data[i][4])); //开启信息窗口
　　　　});
　　})(i)
}
}
//美的
//添加地图类型控件
/*map.addControl(new BMap.MapTypeControl({
mapTypes: [
BMAP_HYBRID_MAP,
BMAP_NORMAL_MAP
]
}));*/
//markerapl.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
}

 

4、效果