百度地图 操作步骤

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); //开启鼠标滚轮缩放
}

 

实例二

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=rtfzcoGFaFbst4XEMj2Iwa1XQlTggO0T"></script>
    </style>
    <title>异步加载地图</title>
</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap"); // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));
    map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>

 

posted @ 2020-01-10 11:44  Ali枝  阅读(655)  评论(0)  编辑  收藏  举报