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>
  • 相关阅读:
    P4559 [JSOI2018]列队
    2019.2.14 考试T3 交互题
    2019.2.14 考试T1 FFT
    P3240 [HNOI2015]实验比较 树形DP
    bzoj 3514: Codechef MARCH14 GERALD07加强版 LCT+主席树
    P4172 [WC2006]水管局长 LCT维护最小生成树
    P4177 [CEOI2008]order 最小割
    CF1073G Yet Another LCP Problem SA+权值线段树
    CF1110D Jongmah
    2019.2.10考试T2, 多项式求exp+生成函数
  • 原文地址:https://www.cnblogs.com/alizhi/p/12175401.html
Copyright © 2011-2022 走看看