网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
风云冷雨吧 关注：2贴子：242

回复：百度地图JavaScript API

只看楼主收藏回复

21、矢量图标
<!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" />
<title>矢量图标</title>
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yaDRGoon5YoRzAAwH781yUgn"></script>
</head>
<body>
<div id="allmap"></div>
<div id="control">
<input type="button" onclick="hide()" value="隐藏">
<input type="button" onclick="show()" value="显示">
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.473008,39.916605);
map.centerAndZoom(point, 16);
map.enableScrollWheelZoom(true);
//设置marker图标为人字形
var vectorPeoplePath = new BMap.Marker(point, {
// 设置自定义path路径25325l99
icon: new BMap.Symbol('m0.5,48.67105l106.55963,0m-53.03642,45.73853l52.06349,51.09042m-52.06349,-51.57716l-48.65731,51.57716m48.41391,-112.39955l0,60.82238m16.17517,-77.24814c0,8.93415 -7.24208,16.17461 -16.17517,16.17461c-8.93307,0 -16.17464,-7.24046 -16.17464,-16.17461c0,-8.93309 7.24156,-16.1747 16.17464,-16.1747c8.93309,0 16.17517,7.24161 16.17517,16.1747z', {
rotation: 0,//顺时针旋转40度
fillColor: 'green',
fillOpacity: 0.8,
strokeColor: '#555',
strokeWeight: 3//线宽
})
});
var vectorFCArrow = new BMap.Marker(new BMap.Point(point.lng-0.01,point.lat), {
// 初始化方向向上的闭合箭头
icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, {
scale: 5,
strokeWeight: 1,
rotation: 0,//顺时针旋转30度
fillColor: 'red',
fillOpacity: 0.8
})
});
var vectorBCArrow = new BMap.Marker(new BMap.Point(point.lng+0.02 , point.lat), {
// 初始化方向向下的闭合箭头
icon: new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_CLOSED_ARROW, {
scale: 5,
strokeWeight: 1,
rotation: 180,
fillColor: 'gold',
fillOpacity: 0.8
})
});
var vectorFOArrow = new BMap.Marker(new BMap.Point(point.lng +0.03, point.lat), {
// 初始化方向向上的开放式箭头
icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
scale: 5,
strokeWeight: 1,
rotation: 0,
fillColor: "pink",
fillOpacity: 0.8
})
});
var vectorBOArrow = new BMap.Marker(new BMap.Point(point.lng+0.04,point.lat), {
// 初始化方向向下的开放式箭头
icon: new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
scale: 5,
strokeWeight: 1,
rotation: 90,
fillColor: 'lightgreen',
fillOpacity: 0.8
})
});
//设置marker图标为水滴
var vectorMarker = new BMap.Marker(new BMap.Point(point.lng,point.lat-0.03), {
// 指定Marker的icon属性为Symbol
icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
scale: 2,//图标缩放大小
fillColor: "orange",//填充颜色
fillOpacity: 0.8//填充透明度
})
});
//设置marker图标为飞机
var vectorPlane = new BMap.Marker(new BMap.Point(point.lng+0.04,point.lat-0.03), {
// 初始化小飞机Symbol
icon: new BMap.Symbol(BMap_Symbol_SHAPE_PLANE, {
scale: 3,
rotation: 0
})
});
var vectorCLOCK = new BMap.Marker(new BMap.Point(point.lng+0.01,point.lat-0.03), {
// 初始化闹钟形状的symbol
icon: new BMap.Symbol(BMap_Symbol_SHAPE_CLOCK, {
scale: 2,
strokeWeight: 1,
fillColor: 'blue',
fillOpacity: 0.8
})
});
var vectorWARNING = new BMap.Marker(new BMap.Point(point.lng+0.02,point.lat-0.03), {
// 初始化警告标志的symbol
icon: new BMap.Symbol(BMap_Symbol_SHAPE_WARNING, {
scale: 2,
strokeWeight: 1,
fillColor: 'pink',
fillOpacity: 0.8
})
});
var vectorStar = new BMap.Marker(new BMap.Point(point.lng+0.03,point.lat-0.03), {
// 初始化五角星symbol
icon: new BMap.Symbol(BMap_Symbol_SHAPE_STAR, {
scale: 5,
fillColor: "pink",
fillOpacity: 0.8
})
});
map.addOverlay(vectorWARNING);
map.addOverlay(vectorPlane);
map.addOverlay(vectorFCArrow);
map.addOverlay(vectorBCArrow);
map.addOverlay(vectorFOArrow);
map.addOverlay(vectorBOArrow);
map.addOverlay(vectorStar);
map.addOverlay(vectorMarker);
map.addOverlay(vectorCLOCK);
map.addOverlay(vectorPeoplePath);
map.setViewport({center:new BMap.Point(116.501035,39.897538),zoom:14})
function hide(){
vectorWARNING.hide();
vectorPlane.hide();
vectorFCArrow.hide();
vectorBCArrow.hide();
vectorFOArrow.hide();
vectorBOArrow.hide();
vectorStar.hide();
vectorCLOCK.hide();
vectorMarker.hide();
vectorPeoplePath.hide();
}
function show(){
vectorWARNING.show();
vectorPlane.show();
vectorFCArrow.show();
vectorBCArrow.show();
vectorFOArrow.show();
vectorBOArrow.show();
vectorStar.show();
vectorCLOCK.show();
vectorMarker.show();
vectorPeoplePath.show();
}
</script>
</html>
IP属地:浙江106楼2017-05-01 00:46
回复
    四、信息窗口示例
    1、添加纯文字的信息窗口
    <!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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{width:100%;height:500px;}
    p{margin-left:5px; font-size:14px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title>纯文本的信息窗口</title>
    </head>
    <body>
    <div id="allmap"></div>
    <p>点击标注点，可查看由纯文本构成的简单型信息窗口</p>
    </body>
    </html>
    <script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.417854,39.921988);
    var marker = new BMap.Marker(point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中
    map.centerAndZoom(point, 15);
    var opts = {
    width : 200, // 信息窗口宽度
    height: 100, // 信息窗口高度
    title : "海底捞王府井店" , // 信息窗口标题
    enableMessage:true,//设置允许信息窗发送短息
    message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
    }
    var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象
    marker.addEventListener("click", function(){
    map.openInfoWindow(infoWindow,point); //开启信息窗口
    });
    </script>
    2、添加图文组合的信息窗口
    <!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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{width:100%;height:500px;}
    p{margin-left:5px; font-size:14px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title>添加复杂内容的信息窗口</title>
    </head>
    <body>
    <div id="allmap"></div>
    <p>点击标注点，可查看由文本，图片构成的复杂型信息窗口</p>
    </body>
    </html>
    <script type="text/javascript">
    // 百度地图API功能
    var sContent =
    "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" +
    "<img style='float:right;margin:4px' id='imgDemo' src='图片网址
    ' width='139' height='104' title='天安门'/>" +
    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +
    "</div>";
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    var marker = new BMap.Marker(point);
    var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
    map.centerAndZoom(point, 15);
    map.addOverlay(marker);
    marker.addEventListener("click", function(){
    this.openInfoWindow(infoWindow);
    //图片加载完毕重绘infowindow
    document.getElementById('imgDemo').onload = function (){
    infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
    }
    });
    </script>
    3、添加带检索功能的信息窗口
    <!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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap {height: 500px;width:100%;overflow: hidden;}
    #result {width:100%;font-size:12px;}
    dl,dt,dd,ul,li{
    margin:0;
    padding:0;
    list-style:none;
    }
    dt{
    font-size:14px;
    font-family:"微软雅黑";
    font-weight:bold;
    border-bottom:1px dotted #000;
    padding:5px 0 5px 5px;
    margin:5px 0;
    }
    dd{
    padding:5px 0 0 5px;
    }
    li{
    line-height:28px;
    }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <title>带检索功能的信息窗口</title>
    </head>
    <body>
    <div id="allmap">
    </div>
    <div id="result">
    <input type="button" value="默认样式" onclick="searchInfoWindow.open(marker);"/>
    <input type="button" value="样式1" onclick="openInfoWindow1()"/>
    <input type="button" value="样式2" onclick="openInfoWindow2()"/>
    <input type="button" value="样式3" onclick="openInfoWindow3()"/>
    </div>
    <script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map('allmap');
    var poi = new BMap.Point(116.307852,40.057031);
    map.centerAndZoom(poi, 16);
    map.enableScrollWheelZoom();
    var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
    '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
    '地址：北京市海淀区上地十街10号
    电话：(010)59928888
    简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
    '</div>';
    //创建检索信息窗口对象
    var searchInfoWindow = null;
    searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
    title : "百度大厦", //标题
    width : 290, //宽度
    height : 105, //高度
    panel : "panel", //检索结果面板
    enableAutoPan : true, //自动平移
    searchTypes :[
    BMAPLIB_TAB_SEARCH, //周边检索
    BMAPLIB_TAB_TO_HERE, //到这里去
    BMAPLIB_TAB_FROM_HERE //从这里出发
    ]
    });
    var marker = new BMap.Marker(poi); //创建marker对象
    marker.enableDragging(); //marker可拖拽
    marker.addEventListener("click", function(e){
    searchInfoWindow.open(marker);
    })
    map.addOverlay(marker); //在地图中添加marker
    //样式1
    var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {
    title: "信息框1", //标题
    panel : "panel", //检索结果面板
    enableAutoPan : true, //自动平移
    searchTypes :[
    BMAPLIB_TAB_FROM_HERE, //从这里出发
    BMAPLIB_TAB_SEARCH //周边检索
    ]
    });
    function openInfoWindow1() {
    searchInfoWindow1.open(new BMap.Point(116.319852,40.057031));
    }
    //样式2
    var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息框2内容", {
    title: "信息框2", //标题
    panel : "panel", //检索结果面板
    enableAutoPan : true, //自动平移
    searchTypes :[
    BMAPLIB_TAB_SEARCH //周边检索
    ]
    });
    function openInfoWindow2() {
    searchInfoWindow2.open(new BMap.Point(116.324852,40.057031));
    }
    //样式3
    var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", {
    title: "信息框3", //标题
    width: 290, //宽度
    height: 40, //高度
    panel : "panel", //检索结果面板
    enableAutoPan : true, //自动平移
    searchTypes :[
    ]
    });
    function openInfoWindow3() {
    searchInfoWindow3.open(new BMap.Point(116.328852,40.057031));
    }
    </script>
    </body>
    </html>
    IP属地:浙江107楼2017-05-06 14:36
    回复
      4、给多个点添加信息窗口
      <!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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
      #allmap{width:100%;height:500px;}
      p{margin-left:5px; font-size:14px;}
      </style>
      <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
      <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
      <title>给多个点添加信息窗口</title>
      </head>
      <body>
      <div id="allmap"></div>
      <p>点击标注点，可查看由纯文本构成的简单型信息窗口</p>
      </body>
      </html>
      <script type="text/javascript">
      // 百度地图API功能
      map = new BMap.Map("allmap");
      map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15);
      var data_info = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],
      [116.406605,39.921585,"地址：北京市东城区东华门大街"],
      [116.412222,39.912345,"地址：北京市东城区正义路甲5号"]
      ];
      var opts = {
      width : 250, // 信息窗口宽度
      height: 80, // 信息窗口高度
      title : "信息窗口" , // 信息窗口标题
      enableMessage:true//设置允许信息窗发送短息
      };
      for(var i=0;i<data_info.length;i++){
      var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1])); // 创建标注
      var content = data_info[i][2];
      map.addOverlay(marker); // 将标注添加到地图中
      addClickHandler(content,marker);
      }
      function addClickHandler(content,marker){
      marker.addEventListener("click",function(e){
      openInfo(content,e)}
      );
      }
      function openInfo(content,e){
      var p = e.target;
      var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
      var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
      map.openInfoWindow(infoWindow,point); //开启信息窗口
      }
      </script>
      5、获取信息窗口的内容
      <!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%;margin:0;font-family:"微软雅黑";font-size:14px;}
      #l-map{height:500px;width:100%;}
      #r-result{width:100%;}
      </style>
      <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
      <title>获取信息窗口的信息</title>
      </head>
      <body>
      <div id="l-map"></div>
      <div id="r-result"></div>
      </body>
      </html>
      <script type="text/javascript">
      // 百度地图API功能
      var sContent ="天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...";
      var map = new BMap.Map("l-map");
      var point = new BMap.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
      var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
      map.openInfoWindow(infoWindow,point); //开启信息窗口
      document.getElementById("r-result").innerHTML = "信息窗口的内容是：<br />" + infoWindow.getContent();
      </script>
      IP属地:浙江108楼2017-05-06 17:14
      回复
        五、右键菜单示例
        1、给地图添加右键菜单
        <!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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
        <title>给地图添加右键菜单</title>
        </head>
        <body>
        <div id="allmap"></div>
        </body>
        </html>
        <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point,15);
        var menu = new BMap.ContextMenu();
        var txtMenuItem = [
        {
        text:'放大',
        callback:function(){map.zoomIn()}
        },
        {
        text:'缩小',
        callback:function(){map.zoomOut()}
        }
        ];
        for(var i=0; i < txtMenuItem.length; i++){
        menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
        }
        map.addContextMenu(menu);
        </script>
        2、给覆盖物添加右键菜单
        <!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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
        <title>给覆盖物添加右键菜单</title>
        </head>
        <body>
        <div id="allmap"></div>
        </body>
        </html>
        <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point,15);
        var removeMarker = function(e,ee,marker){
        map.removeOverlay(marker);
        }
        //创建右键菜单
        var markerMenu=new BMap.ContextMenu();
        markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        marker.addContextMenu(markerMenu);
        </script>
        IP属地:浙江109楼2017-05-06 17:56
        回复
          六、鼠标示例
          1、设置鼠标样式
          <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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
          <title>设置地图默认的鼠标样式</title>
          </head>
          <body>
          <div id="allmap"></div>
          </body>
          </html>
          <script type="text/javascript">
          // 百度地图API功能
          var map = new BMap.Map("allmap");
          map.centerAndZoom("重庆",12);
          map.setDefaultCursor("url('bird.cur')"); //设置地图默认的鼠标指针样式
          </script>
          2、鼠标滚轮缩放地图
          <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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
          <title>鼠标滚轮缩放地图</title>
          </head>
          <body>
          <div id="allmap"></div>
          </body>
          </html>
          <script type="text/javascript">
          // 百度地图API功能
          var map = new BMap.Map("allmap");
          map.centerAndZoom("重庆",12);
          map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
          map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
          </script>
          3、鼠标拉框放大地图
          <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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
          <script type="text/javascript" src="http://api.map.baidu.com/library/RectangleZoom/1.2/src/RectangleZoom_min.js"></script>
          <title>鼠标拉框放大地图</title>
          </head>
          <body>
          <div id="allmap"></div>
          </body>
          </html>
          <script type="text/javascript">
          // 百度地图API功能
          var map = new BMap.Map("allmap");
          map.centerAndZoom("重庆",12);
          var myDrag = new BMapLib.RectangleZoom(map, {
          followText: "拖拽鼠标进行操作"
          });
          myDrag.open(); //开启拉框放大
          //myDrag.close(); //关闭拉框放大
          </script>
          IP属地:浙江110楼2017-05-28 08:20
          回复
            4、鼠标测距
            <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="http://api.map.baidu.com/api?v=1.2"></script>
            <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
            <title>鼠标测距</title>
            </head>
            <body>
            <div id="allmap"></div>
            </body>
            </html>
            <script type="text/javascript">
            // 百度地图API功能
            var map = new BMap.Map("allmap");
            map.centerAndZoom("重庆",12);
            var myDis = new BMapLib.DistanceTool(map);
            map.addEventListener("load",function(){
            myDis.open(); //开启鼠标测距
            //myDis.close(); //关闭鼠标测距大
            });
            </script>
            5、鼠标点击拾取坐标
            <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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
            <title>单击获取点击的经纬度</title>
            </head>
            <body>
            <div id="allmap"></div>
            </body>
            </html>
            <script type="text/javascript">
            // 百度地图API功能
            var map = new BMap.Map("allmap");
            map.centerAndZoom("重庆",12);
            //单击获取点击的经纬度
            map.addEventListener("click",function(e){
            alert(e.point.lng + "," + e.point.lat);
            });
            </script>
            6、鼠标绘制点线面
            <!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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
            #allmap {width: 100%; height:500px; overflow: hidden;}
            #result {width:100%;font-size:12px;}
            dl,dt,dd,ul,li{
            margin:0;
            padding:0;
            list-style:none;
            }
            p{font-size:12px;}
            dt{
            font-size:14px;
            font-family:"微软雅黑";
            font-weight:bold;
            border-bottom:1px dotted #000;
            padding:5px 0 5px 5px;
            margin:5px 0;
            }
            dd{
            padding:5px 0 0 5px;
            }
            li{
            line-height:28px;
            }
            </style>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
            <!--加载鼠标绘制工具-->
            <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
            <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
            <!--加载检索信息窗口-->
            <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
            <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
            <title>鼠标绘制工具</title>
            </head>
            <body>
            <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
            <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
            </div>
            <div id="result">
            <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>
            <input type="button" value="清除所有覆盖物" onclick="clearAll()"/>
            </div>
            <script type="text/javascript">
            // 百度地图API功能
            var map = new BMap.Map('map');
            var poi = new BMap.Point(116.307852,40.057031);
            map.centerAndZoom(poi, 16);
            map.enableScrollWheelZoom();
            var overlays = [];
            var overlaycomplete = function(e){
            overlays.push(e.overlay);
            };
            var styleOptions = {
            strokeColor:"red", //边线颜色。
            fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 3, //边线的宽度，以像素为单位。
            strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
            fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
            }
            //实例化鼠标绘制工具
            var drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: false, //是否开启绘制模式
            enableDrawingTool: true, //是否显示工具栏
            drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5, 5), //偏离值
            },
            circleOptions: styleOptions, //圆的样式
            polylineOptions: styleOptions, //线的样式
            polygonOptions: styleOptions, //多边形的样式
            rectangleOptions: styleOptions //矩形的样式
            });
            //添加鼠标绘制工具监听事件，用于获取绘制结果
            drawingManager.addEventListener('overlaycomplete', overlaycomplete);
            function clearAll() {
            for(var i = 0; i < overlays.length; i++){
            map.removeOverlay(overlays[i]);
            }
            overlays.length = 0
            }
            </script>
            </body>
            </html>
            IP属地:浙江111楼2017-05-28 09:08
            回复
              七、叠加层示例
              1、叠加/删除路况图层
              <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>
              <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
              <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
              <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
              <title>路况图层</title>
              </head>
              <body>
              <div id="allmap"></div>
              </body>
              </html>
              <script type="text/javascript">
              // 百度地图API功能
              var map = new BMap.Map("allmap");
              map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
              var ctrl = new BMapLib.TrafficControl({
              showPanel: false //是否显示路况提示面板
              });
              map.addControl(ctrl);
              ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);
              </script>
              2、叠加/删除清华微观图
              <!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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
              #allmap{width:100%;height:500px;}
              #r-result{width:100%;margin-top:5px;}
              p{margin:5px; font-size:14px;}
              </style>
              <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
              <title>添加清华校园微观图</title>
              </head>
              <body>
              <div id="allmap"></div>
              <div id="r-result">
              <input type="button" onclick="add_control();" value="添加" />
              <input type="button" onclick="delete_control();" value="删除" />
              </div>
              </body>
              </html>
              <script type="text/javascript">
              // 百度地图API功能
              var map = new BMap.Map('allmap');
              map.addControl(new BMap.NavigationControl());
              map.centerAndZoom(new BMap.Point(116.332782, 40.007978), 16);
              var tileLayer = new BMap.TileLayer({isTransparentPng: true});
              tileLayer.getTilesUrl = function(tileCoord, zoom) {
              var x = tileCoord.x;
              var y = tileCoord.y;
              return 'http://developer.baidu.com/map/jsdemo/demo/tiles/' + zoom + '/tile' + x + '_' + y + '.png'; //根据当前坐标，选取合适的瓦片图
              }
              var copyCtrl = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
              copyCtrl.addCopyright({id: 1, content: "版权说明：清华校园图片取自互联网"});
              map.addControl(copyCtrl);
              function add_control(){
              map.addTileLayer(tileLayer);
              }
              function delete_control(){
              map.removeTileLayer(tileLayer);
              }
              add_control();
              </script>
              IP属地:浙江112楼2017-05-28 09:56
              回复
                5、叠加/删除自定义网格
                <!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" />
                <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                <title>自定义网格</title>
                <style type="text/css">
                body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
                #allmap{width:100%;height:500px;}
                #r-result{width:100%;margin-top:5px;}
                p{margin:5px; font-size:14px;}
                </style>
                </head>
                <body>
                <div id="allmap"></div>
                <div id="r-result">
                <input type="button" onclick="add_control();" value="添加" />
                <input type="button" onclick="delete_control();" value="删除" />
                </div>
                </body>
                </html>
                <script type="text/javascript">
                // 百度地图API功能
                var map = new BMap.Map("allmap"); // 创建Map实例
                var point = new BMap.Point(116.404, 39.915); // 创建点坐标
                map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。
                map.enableScrollWheelZoom(); //启用滚轮放大缩小
                var tileLayer = new BMap.TileLayer({isTransparentPng: true});
                tileLayer.getTilesUrl = function(tileCoord, zoom) {
                var x = tileCoord.x;
                var y = tileCoord.y;
                return "http://developer.baidu.com/map/jsdemo/img/border.jpg";
                }
                function add_control(){
                map.addTileLayer(tileLayer);
                }
                function delete_control(){
                map.removeTileLayer(tileLayer);
                }
                add_control();
                </script>
                IP属地:浙江116楼2017-05-28 14:36
                回复
                  八、事件示例
                  1、图块加载完毕事件
                  <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;hidden;margin:0;}
                  </style>
                  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                  <title>图块加载完毕</title>
                  </head>
                  <body>
                  <div id="allmap"></div>
                  </body>
                  </html>
                  <script type="text/javascript">
                  // 百度地图API功能
                  var map = new BMap.Map("allmap");
                  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
                  map.addEventListener("tilesloaded",function(){alert("地图加载完毕");});
                  </script>
                  2、地图单击事件
                  <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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-family:"微软雅黑";}
                  #allmap{width:100%;height:500px;}
                  p{margin-left:5px; font-size:14px;}
                  </style>
                  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                  <title>地图单击事件</title>
                  </head>
                  <body>
                  <div id="allmap"></div>
                  <p>添加点击地图监听事件，点击地图后显示当前经纬度</p>
                  </body>
                  </html>
                  <script type="text/javascript">
                  // 百度地图API功能
                  var map = new BMap.Map("allmap");
                  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
                  function showInfo(e){
                  alert(e.point.lng + ", " + e.point.lat);
                  }
                  map.addEventListener("click", showInfo);
                  </script>
                  IP属地:浙江117楼2017-05-28 15:46
                  回复
                    3、给覆盖物注册事件
                    <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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                    <title>给覆盖物注册事件</title>
                    </head>
                    <body>
                    <div id="allmap"></div>
                    </body>
                    </html>
                    <script type="text/javascript">
                    // 百度地图API功能
                    var map = new BMap.Map("allmap");
                    var point = new BMap.Point(116.404, 39.915);
                    map.centerAndZoom(point, 15);
                    var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点
                    marker.addEventListener("click",attribute);
                    map.addOverlay(marker); //增加点
                    function attribute(){
                    var p = marker.getPosition(); //获取marker的位置
                    alert("marker的位置是" + p.lng + "," + p.lat);
                    }
                    </script>
                    4、传递事件参数
                    <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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                    <title>传递事件参数</title>
                    </head>
                    <body>
                    <div id="allmap"></div>
                    </body>
                    </html>
                    <script type="text/javascript">
                    // 百度地图API功能
                    var map = new BMap.Map("allmap");
                    var point = new BMap.Point(116.404, 39.915);
                    map.centerAndZoom(point, 15);
                    var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点
                    map.addOverlay(marker); //增加点
                    marker.addEventListener("click",overlay_style);
                    var polyline = new BMap.Polyline([
                    new BMap.Point(116.383752, 39.91334),
                    new BMap.Point(116.38792, 39.920866),
                    new BMap.Point(116.390867, 39.906532)
                    ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //创建折线
                    map.addOverlay(polyline); //增加折线
                    polyline.addEventListener("click",overlay_style);
                    var circle = new BMap.Circle(new BMap.Point(116.415157, 39.914004),500,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //创建圆
                    map.addOverlay(circle); //增加圆
                    circle.addEventListener("click",overlay_style);
                    //获取marker的属性
                    function overlay_style(e){
                    var p = e.target;
                    if(p instanceof BMap.Marker){
                    alert("该覆盖物是点，点的坐标是：" + p.getPosition().lng + "," + p.getPosition().lat);
                    }else if(p instanceof BMap.Circle){
                    alert("该覆盖物是圆，圆的半径是：" + p.getRadius() + "，圆的中心点坐标是：" + p.getCenter().lng + "," + p.getCenter().lat);
                    }else if(p instanceof BMap.Polyline){
                    alert("该覆盖物是折线，所画点的个数是：" + p.getPath().length);
                    }else{
                    alert("无法获知该覆盖物类型");
                    }
                    }
                    </script>
                    IP属地:浙江118楼2017-05-28 16:01
                    回复
                      5、为多个点注册点击事件
                      <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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                      <title>为多个点注册单击事件</title>
                      </head>
                      <body>
                      <div id="allmap"></div>
                      </body>
                      </html>
                      <script type="text/javascript">
                      // 百度地图API功能
                      var map = new BMap.Map("allmap");
                      var point = new BMap.Point(116.404, 39.915);
                      map.centerAndZoom(point, 15);
                      var json_data = [[116.404,39.915],[116.383752,39.91334],[116.384502,39.932241]];
                      var pointArray = new Array();
                      for(var i=0;i<json_data.length;i++){
                      var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
                      map.addOverlay(marker); //增加点
                      pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
                      marker.addEventListener("click",attribute);
                      }
                      //让所有点在视野范围内
                      map.setViewport(pointArray);
                      //获取覆盖物位置
                      function attribute(e){
                      var p = e.target;
                      alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);
                      }
                      </script>
                      6、注销事件
                      <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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-family:"微软雅黑";}
                      #allmap{width:100%;height:500px;}
                      </style>
                      <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                      <title>注销事件</title>
                      </head>
                      <body>
                      <div id="allmap"></div>
                      <div id="result">
                      <button id="open" onclick="addClick()">增加地图点击事件</button>
                      <button id="close" onclick="removeClick()">注销地图点击事件</button>
                      </div>
                      </body>
                      </html>
                      <script type="text/javascript">
                      // 百度地图API功能
                      var map = new BMap.Map("allmap");
                      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
                      function showInfo(e){
                      alert(e.point.lng + ", " + e.point.lat);
                      }
                      function addClick(){
                      map.addEventListener("click", showInfo);
                      }
                      function removeClick(){
                      map.removeEventListener("click", showInfo);
                      }
                      </script>
                      IP属地:浙江119楼2017-05-28 16:09
                      回复
                        九、GPS功能
                        1、单个点沿线运动
                        <!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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                        <title>单个标注点沿直线的轨迹运动</title>
                        </head>
                        <body>
                        <div id="allmap"></div>
                        </body>
                        </html>
                        <script type="text/javascript">
                        // 百度地图API功能
                        var map = new BMap.Map("allmap");
                        map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
                        var myP1 = new BMap.Point(116.380967,39.913285); //起点
                        var myP2 = new BMap.Point(116.424374,39.914668); //终点
                        var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/Mario.jpg", new BMap.Size(32, 70), { //小车图片
                        //offset: new BMap.Size(0, -5), //相当于CSS精灵
                        imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
                        });
                        var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); //驾车实例
                        driving2.search(myP1, myP2); //显示一条公交线路
                        window.run = function (){
                        var driving = new BMap.DrivingRoute(map); //驾车实例
                        driving.search(myP1, myP2);
                        driving.setSearchCompleteCallback(function(){
                        var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组
                        var paths = pts.length; //获得有几个点
                        var carMk = new BMap.Marker(pts[0],{icon:myIcon});
                        map.addOverlay(carMk);
                        i=0;
                        function resetMkPoint(i){
                        carMk.setPosition(pts[i]);
                        if(i < paths){
                        setTimeout(function(){
                        i++;
                        resetMkPoint(i);
                        },100);
                        }
                        }
                        setTimeout(function(){
                        resetMkPoint(5);
                        },100)
                        });
                        }
                        setTimeout(function(){
                        run();
                        },1500);
                        </script>
                        2、多点沿线运动
                        <!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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                        <title>多个标注点沿折线的轨迹运动</title>
                        </head>
                        <body>
                        <div id="allmap"></div>
                        </body>
                        </html>
                        <script type="text/javascript">
                        // 百度地图API功能
                        var map = new BMap.Map("allmap");
                        map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
                        var bounds = null;
                        var linesPoints = null;
                        var spoi1 = new BMap.Point(116.380967,39.913285); // 起点1
                        var spoi2 = new BMap.Point(116.380967,39.953285); // 起点2
                        var epoi = new BMap.Point(116.424374,39.914668); // 终点
                        var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/Mario.jpg", new BMap.Size(32, 70), {imageOffset: new BMap.Size(0, 0)});
                        function initLine(){
                        bounds = new Array();
                        linesPoints = new Array();
                        map.clearOverlays(); // 清空覆盖物
                        var driving3 = new BMap.DrivingRoute(map,{onSearchComplete:drawLine}); // 驾车实例,并设置回调
                        driving3.search(spoi1, epoi); // 搜索一条线路
                        var driving4 = new BMap.DrivingRoute(map,{onSearchComplete:drawLine}); // 驾车实例,并设置回调
                        driving4.search(spoi2, epoi); // 搜索一条线路
                        }
                        function run(){
                        for(var m = 0;m < linesPoints.length; m++){
                        var pts = linesPoints[m];
                        var len = pts.length;
                        var carMk = new BMap.Marker(pts[0],{icon:myIcon});
                        map.addOverlay(carMk);
                        resetMkPoint(1,len,pts,carMk)
                        }
                        function resetMkPoint(i,len,pts,carMk){
                        carMk.setPosition(pts[i]);
                        if(i < len){
                        setTimeout(function(){
                        i++;
                        resetMkPoint(i,len,pts,carMk);
                        },100);
                        }
                        }
                        }
                        function drawLine(results){
                        var opacity = 0.45;
                        var planObj = results.getPlan(0);
                        var b = new Array();
                        var addMarkerFun = function(point,imgType,index,title){
                        var url;
                        var width;
                        var height
                        var myIcon;
                        // imgType:1的场合，为起点和终点的图；2的场合为车的图形
                        if(imgType == 1){
                        url = "http://developer.baidu.com/map/jsdemo/img/dest_markers.jpg";
                        width = 42;
                        height = 34;
                        myIcon = new BMap.Icon(url,new BMap.Size(width, height),{offset: new BMap.Size(14, 32),imageOffset: new BMap.Size(0, 0 - index * height)});
                        }else{
                        url = "http://developer.baidu.com/map/jsdemo/img/trans_icons.jpg";
                        width = 22;
                        height = 25;
                        var d = 25;
                        var cha = 0;
                        var jia = 0
                        if(index == 2){
                        d = 21;
                        cha = 5;
                        jia = 1;
                        }
                        myIcon = new BMap.Icon(url,new BMap.Size(width, d),{offset: new BMap.Size(10, (11 + jia)),imageOffset: new BMap.Size(0, 0 - index * height - cha)});
                        }
                        var marker = new BMap.Marker(point, {icon: myIcon});
                        if(title != null && title != ""){
                        marker.setTitle(title);
                        }
                        // 起点和终点放在最上面
                        if(imgType == 1){
                        marker.setTop(true);
                        }
                        map.addOverlay(marker);
                        }
                        var addPoints = function(points){
                        for(var i = 0; i < points.length; i++){
                        bounds.push(points[i]);
                        b.push(points[i]);
                        }
                        }
                        // 绘制驾车步行线路
                        for (var i = 0; i < planObj.getNumRoutes(); i ++){
                        var route = planObj.getRoute(i);
                        if (route.getDistance(false) <= 0){continue;}
                        addPoints(route.getPath());
                        // 驾车线路
                        if(route.getRouteType() == BMAP_ROUTE_TYPE_DRIVING){
                        map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#0030ff",strokeOpacity:opacity,strokeWeight:6,enableMassClear:true}));
                        }else{
                        // 步行线路有可能为0
                        map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#30a208",strokeOpacity:0.75,strokeWeight:4,enableMassClear:true}));
                        }
                        }
                        map.setViewport(bounds);
                        // 终点
                        addMarkerFun(results.getEnd().point,1,1);
                        // 开始点
                        addMarkerFun(results.getStart().point,1,0);
                        linesPoints[linesPoints.length] = b;
                        }
                        initLine();
                        setTimeout(function(){
                        run();
                        },1500);
                        </script>
                        IP属地:浙江120楼2017-05-29 16:05
                        回复
                          十、全景图示例
                          1、全景控件展示
                          <!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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
                          #allmap{width:100%;height:500px;}
                          p{margin-left:5px; font-size:14px;}
                          </style>
                          <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                          <title>显示全景控件</title>
                          </head>
                          <body>
                          <div id="allmap"></div>
                          <p>在地图上添加全景控件，点击全景控件进入全景图</p>
                          </body>
                          </html>
                          <script type="text/javascript">
                          var map = new BMap.Map('allmap');
                          map.centerAndZoom(new BMap.Point(120.305456, 31.570037), 12);
                          map.enableScrollWheelZoom(true);
                          // 覆盖区域图层测试
                          map.addTileLayer(new BMap.PanoramaCoverageLayer());
                          var stCtrl = new BMap.PanoramaControl(); //构造全景控件
                          stCtrl.setOffset(new BMap.Size(20, 20));
                          map.addControl(stCtrl);//添加全景控件
                          </script>
                          2、获取指定的全景图
                          <!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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
                          #panorama {width:100%; height: 500px;}
                          #result {width:100%;font-size:12px;}
                          </style>
                          <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                          <title>获取指定的全景图</title>
                          </head>
                          <body>
                          <div id="panorama"></div>
                          <div id="result">
                          <button id="setPanoramaByLocation">按经纬度展示全景</button><button id="setPanoramaById">按全景Id展示全景</button>
                          </div>
                          </body>
                          </html>
                          <script type="text/javascript">
                          var map = new BMap.Map('panorama');
                          map.centerAndZoom(new BMap.Point(120.305456, 31.570037), 12);
                          //添加一个地图图层实例,并在其中创建全景覆盖区域图层的实例。
                          map.addTileLayer(new BMap.PanoramaCoverageLayer());
                          //创建全景图展示
                          var panorama = new BMap.Panorama('panorama');
                          panorama.setPov({heading: -40, pitch: 6});
                          document.getElementById("setPanoramaByLocation").onclick = function(){
                          panorama.setPosition(new BMap.Point(120.320032, 31.589666)); //根据经纬度坐标展示全景图
                          };
                          document.getElementById("setPanoramaById").onclick = function(){
                          panorama.setId('0100010000130501122416015Z1');//根据全景id展示全景图
                          };
                          </script>
                          3、叠加全景图层
                          <!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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
                          #allmap{width:100%;height:500px;}
                          p{margin-left:5px; font-size:14px;}
                          </style>
                          <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                          <title>叠加全景图层</title>
                          </head>
                          <body>
                          <div id="allmap"></div>
                          <p>全景图层用于展示全景覆盖的城市范围</p>
                          </body>
                          </html>
                          <script type="text/javascript">
                          var map = new BMap.Map('allmap');
                          map.centerAndZoom('无锡');
                          // 覆盖区域图层测试
                          map.addTileLayer(new BMap.PanoramaCoverageLayer());
                          </script>
                          IP属地:浙江122楼2017-05-30 08:35
                          回复
                            4、显示/隐藏全景导航控件
                            <!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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
                            #panorama {width:100%; height: 500px;}
                            #result {width:100%;font-size:12px;}
                            </style>
                            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                            <title>显示/隐藏导航控件</title>
                            </head>
                            <body>
                            <div id="panorama"></div>
                            <div id="result">
                            <button id="hideNavigationControl">隐藏导航控件</button>
                            <button id="showNavigationControl">显示导航控件</button>
                            </div>
                            </body>
                            </html>
                            <script type="text/javascript">
                            var panorama = new BMap.Panorama('panorama'); //默认为显示导航控件
                            panorama.setPosition(new BMap.Point(116.316169, 40.005567));
                            document.getElementById("hideNavigationControl").onclick = function(){
                            panorama.setOptions({
                            navigationControl: false //隐藏导航控件
                            });
                            };
                            document.getElementById("showNavigationControl").onclick = function(){
                            panorama.setOptions({
                            navigationControl: true //显示导航控件
                            });
                            };
                            </script>
                            5、显示/隐藏全景道路指引控件
                            <!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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
                            #panorama {width:100%; height: 500px;}
                            #result {width:100%;font-size:12px;}
                            </style>
                            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                            <title>显示/隐藏 道路指示控件</title>
                            </head>
                            <body>
                            <div id="panorama"></div>
                            <div id="result">
                            <button id="hideLinksControl">隐藏道路指示控件</button>
                            <button id="showLinksControl">显示道路指示控件</button>
                            </div>
                            </body>
                            </html>
                            <script type="text/javascript">
                            var panorama = new BMap.Panorama('panorama'); //默认为显示道路指示控件
                            panorama.setPosition(new BMap.Point(116.316169, 40.005567));
                            document.getElementById("hideLinksControl").onclick = function(){
                            panorama.setOptions({
                            linksControl: false //隐藏道路指示控件
                            });
                            };
                            document.getElementById("showLinksControl").onclick = function(){
                            panorama.setOptions({
                            linksControl: true //显示道路指示控件
                            });
                            };
                            </script>
                            IP属地:浙江123楼2017-05-30 08:45
                            回复
                              6、添加/删除全景相册控件
                              <!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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
                              #panorama {width:100%; height: 500px;}
                              #result {width:100%;font-size:12px;}
                              </style>
                              <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                              <title>添加/删除全景相册控件</title>
                              </head>
                              <body>
                              <div id="panorama"></div>
                              <div id="result">
                              <div>
                              <button id="hideAlbumsControl">隐藏全景相册控件</button>
                              <button id="showAlbumsControl">显示全景相册控件</button>
                              </div>
                              </div>
                              </body>
                              </html>
                              <script type="text/javascript">
                              var panorama = new BMap.Panorama('panorama', {
                              albumsControl: true //默认为不显示相册控件，默认值为false
                              });
                              panorama.setPosition(new BMap.Point(116.316169, 40.005567));
                              panorama.setPov({pitch: 5.04, heading: 343.92});
                              //设置相册位置为右上角
                              panorama.setOptions({
                              albumsControlOptions: {
                              anchor: BMAP_ANCHOR_TOP_RIGHT
                              }
                              });
                              //设置偏移量，距离上面15px，距离左边100px（距离那边受anchor位置的影响）
                              panorama.setOptions({
                              albumsControlOptions: {
                              offset: new BMap.Size(100, 15)
                              }
                              });
                              //设置相册的长度和图片大小,相册的最大宽度为60%，相册内图片的大小为80px
                              panorama.setOptions({
                              albumsControlOptions: {
                              maxWidth: '60%',
                              imageHeight: 80
                              }
                              });
                              //隐藏相册
                              document.getElementById("hideAlbumsControl").onclick = function(){
                              panorama.setOptions({
                              albumsControl: false
                              });
                              };
                              //显示相册
                              document.getElementById("showAlbumsControl").onclick = function(){
                              panorama.setOptions({
                              albumsControl: true
                              });
                              };
                              </script>
                              7、显示/隐藏室内景切换控件
                              <!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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
                              #panorama {width:100%; height: 500px;}
                              #result {width:100%;font-size:12px;}
                              </style>
                              <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                              <title>显示/隐藏室内景切换控件</title>
                              </head>
                              <body>
                              <div id="panorama"></div>
                              <div id="result">
                              <button id="disableIndoorSceneSwitchControl">隐藏室内景场景点切换控件</button>
                              <button id="enableIndoorSceneSwitchControl">显示室内景场景点切换控件</button>
                              </div>
                              </body>
                              </html>
                              <script type="text/javascript">
                              var panorama = new BMap.Panorama('panorama'); //全景室内景切换控件默认为显示
                              panorama.setId('0400220000130924021356735IN');
                              document.getElementById("disableIndoorSceneSwitchControl").onclick = function(){
                              panorama.setOptions({
                              indoorSceneSwitchControl: false //配置全景室内景切换控件不显示
                              });
                              };
                              document.getElementById("enableIndoorSceneSwitchControl").onclick = function(){
                              panorama.setOptions({
                              indoorSceneSwitchControl: true //配置全景室内景切换控件显示
                              });
                              };
                              </script>
                              IP属地:浙江124楼2017-05-30 09:53
                              回复

                                扫二维码下载贴吧客户端

                                下载贴吧APP
                                看高清直播、视频！
                                发表回复
                                发贴请遵守贴吧协议及“七条底线”贴吧投诉
                                内  容:
                                  查看全部
                                发 表
                                保存至快速回贴

                                发布成功
                                去贴吧APP订阅抽奖结果通知
                                扫码进入贴吧APP
                                ···········
                                开奖后第一时间站内信通知
                                ···········
                                中奖结果全员公示