zoukankan html css js c++ java

百度地图操作步骤

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>

查看全文

相关阅读:
Bootstrap 2.2.2 的新特性
 Apache POI 3.9 发布，性能显著提升
 SQL Relay 0.48 发布，数据库中继器
 ProjectForge 4.2.0 发布，项目管理系统
 红帽企业 Linux 发布 6.4 Beta 版本
 红薯快速的 MySQL 本地和远程密码破解
 MariaDB 宣布成立基金会
 Percona XtraBackup 2.0.4 发布
 Rocks 6.1 发布，光盘机群解决方案
 精通Servlet研究,HttpServlet的实现追究

原文地址：https://www.cnblogs.com/alizhi/p/12175401.html

百度地图 操作步骤

百度地图操作步骤