zoukankan      html  css  js  c++  java
  • 【百度地图】接口使用资料

    下边是写好的html代码,直接保存成页面就可以了

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>百度地图</title>
    <style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{height:100%}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    </head>

    <body>
    <div id="container"></div>
    <script type="text/javascript">
    localSearch();
    //deploySearch();
    //rimSearch();
    //boundsSearch();
    //busLine();
    //drivingLine();

    //根据关键字搜索区域
    function localSearch(){
    var map = new BMap.Map("container"); // 创建地图实例
    map.addControl(new BMap.NavigationControl());//地图控制插件,该插件可以控制地图的位置地图的显示比例
    map.addControl(new BMap.ScaleControl());//显示在地图下方,告诉你地图上1cm对应的真实距离
    //map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());//地图的显示类型:包括地图和卫星
    //确定搜索对象
    var local=new BMap.LocalSearch(map,{
    renderOptions:{map:map}
    });
    //根据关键字定义到相应的区域
    local.search("中国气象局");
    }

    //搜索北京市里的中关村,只显示8个结果
    function deploySearch(){
    var map=new BMap.Map("container");
    map.addControl(new BMap.NavigationControl());
    var local=new BMap.LocalSearch("北京市",{
    renderOptions:{
    map:map,
    autoViewport:true,
    selectFirstResult:true
    },
    pageCapacity:8
    });
    local.search("中关村");
    }

    //在南京玄武湖附近搜索小吃
    function rimSearch(){
    var map = new BMap.Map("container");
    var point = new BMap.Point(118.783557,32.053502); // 创建点坐标
    map.centerAndZoom(point,15); // 初始化地图,设置初始点为南京
    map.addControl(new BMap.NavigationControl());
    var local = new BMap.LocalSearch(map, {
    renderOptions:{map: map, autoViewport: true}
    });
    local.searchNearby("小吃", "玄武湖");
    }

    //当前地图视野范围内搜索银行
    function boundsSearch(){
    var map = new BMap.Map("container");
    //地点为北京
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
    map.addControl(new BMap.NavigationControl());
    var local = new BMap.LocalSearch(map, {
    renderOptions:{map: map}
    });
    //搜索地图视野内的银行
    local.searchInBounds("银行", map.getBounds());
    }

    //公交导航的区域范围只能是市,下面是南京市天隆寺到玄武湖的公交路线
    function busLine(){
    var map = new BMap.Map("container");
    //地点为南京
    map.centerAndZoom(new BMap.Point(118.783557,32.053502), 14);
    map.addControl(new BMap.NavigationControl());
    var transit = new BMap.TransitRoute(map, {
    renderOptions: {map: map}
    });
    transit.search("天隆寺", "玄武湖");
    }

    //南京从天隆寺到玄武湖驾车路线
    function drivingLine(){
    var map = new BMap.Map("container");
    //地点为南京
    map.centerAndZoom(new BMap.Point(118.783557,32.053502), 14);
    map.addControl(new BMap.NavigationControl());
    var driving = new BMap.DrivingRoute(map, {
    renderOptions: {
    map: map,
    autoViewport: true
    }
    });
    driving.search("天隆寺", "玄武湖");
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    2.4 使用vue-cli创建项目/项目打包/发布
    2.3 vue-cli脚手架工具/nodejs
    2.2 vue的devtools、eslint检测问题
    2. es6扩展运算符
    文件json
    函数
    函数不固定参数
    监控日志,加入黑名单
    非空即真
    随机生成手机号,存入文件
  • 原文地址:https://www.cnblogs.com/liujinyu/p/BaiduMap.html
Copyright © 2011-2022 走看看