zoukankan      html  css  js  c++  java
  • 百度api使用心得体会

    最近项目中在使用百度地图api,对于其中的一些有用的点做一些归纳整理,如有不对的地方,欢迎各位大神纠正指出。

    一定要学会查找百度地图api提供的类参考网站:http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html,这个能加快对于地图的属性,方法等的应用。

    一、创建地图

    插入一个div用作地图的容器,地图的大小样式可根据项目需求对样式大小进行修改。

    <style type="text/css">
            body, html, #map {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                font-family: "微软雅黑";
            }
    </style>
    <div id="map"></div>

    在html页中引入api所需要的js库 如下:

    <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>
    <script type="text/javascript">
     var map = new BMap.Map("map"); // 创建Map实例
     var lng=113.672743;//经度
     var lat=34.766299;//纬度
     var point = new BMap.Point(lng, lat);
     map.centerAndZoom(point, 14);
    </script>

    如果没有密钥可以去百度地图api官网注册一个密钥。

    这样我们就实现好了一个以郑州为中心点(根据经纬度坐标),地图缩放比例是14的地图。

    经纬度的获取可以通过下面百度提供的网站进行抓取:http://api.map.baidu.com/lbsapi/getpoint/index.html

    二、地图标志

    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});// 定义 左上角,添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  // 定义 左上角,添加默认缩放平移控件
    map.addControl(top_left_control);//添加
    map.addControl(top_left_navigation);//添加

    addControl的方法是添加图控件,例如:比例尺,缩放的滚轴等。关于地图上的控件可以查看百度api的示例,根据自己的需要进行添加,地址如下:http://lbsyun.baidu.com/jsdemo.htm#a1_2

    另外在项目中需要去掉百度左下角的logo及下面附属的文字,可对左下角样式进行定义去除:

     .anchorBL {
                display: none;
            }

    三、查找

    查找的示例:

            var local = new BMap.LocalSearch(map, {
                renderOptions: { map: map }
            });
            local.search("景点");

    关于查找我们可以详细看下LocalSearch这个类,其中查找的方法有search,searchInBounds,searchNearby这三个。

    search(keyword: String | Array<String>, option: Object):根据检索词发起检索,当keyword为数组时将同时执行多关键字的查询,最多支持10个关键字。

    searchInBounds(keyword: String | Array<String>, bounds: Bounds, option: Object):根据范围和检索词发起范围检索,当keyword为数组时将同时执行多关键字检索,最多支持10个关键字。(这个方法我用到的少,主要是因为bounds没时间研究)

    searchNearby(keyword: String | Array<String>, center:LocalResultPoi| String | Point, radius: Number, option: Object):根据中心点、半径与检索词发起周边检索。当keyword为数组时将同时执行多关键字的检索,最多支持10个关键字。(这个方法再项目中用到的比较多,项目功能是实现楼盘周边配套施设的)。

    对于LocalSearch中的renderOptions中还包含了一个回调函数onSearchComplete,在项目中的应用比较广泛:

    可以这样定义:

    onSearchComplete: function(results){  
    // 判断状态是否正确
    if (local.getStatus() == BMAP_STATUS_SUCCESS) {
    //执行操作
    }
    }

    其中results表示的搜索到的结果集,像例子中就表示是郑州周边的景点的结果集。

    results中常用到的属性和方法有:

    results.getCurrentNumPois():表示获取当前页结果集所有的点。当页显示多少可以再renderOptions中定义,比如:pageCapacity: 20,表示显示20个。

    results.getPoi(1).point.lng:获取结果集第一个点的经度。

    results.getPoi(1).point.lat:获取结果集第一个点的纬度。

    results.getPoi(1).point.title:获取结果集第一个点的名称。

    results.getPoi(1).point.address:获取结果集第一个点的地址。

    results.getPoi(1).point.phoneNumber:获取结果集第一个点的电话。

    map.getDistance:可以根据经纬度计算两点间的距离,如果用的到可以拓展路线,打车等服务(详情参考:TaxiFare类)。

    四、遮盖物

    有的时候我们需要对地图上点进行标记等操作,这时候我们就需要对其添加遮盖物,比较常见的有圆形,矩形,三角形等不规则的简单遮盖层,这些百度地图给的例子中有详细介绍以及demo。这里我就说一说项目中用到的复杂自定义遮盖物。

    实现思路是通过画图的方式,根据点的坐标,通过var pixel = map.pointToOverlayPixel(this._point);这句代码把坐标跟屏幕的像素进行转换,以得到遮盖物在屏幕上显示的横纵坐标,并赋值给left和top属性。

    最后通过map.addOverlay(遮盖物对象)方法,添加遮盖物。清楚遮盖无是 map.clearOverlays()。

    详情可以参考:http://lbsyun.baidu.com/jsdemo.htm#c1_11中的覆盖物示例中的添加自定义覆盖物,我是根据这个方法进行修改,实现了地图找房,楼盘周边交通示例等功能。

    以上是我最近使用百度地图api的一些心得体会,第一次写博客,有什么不到位的,还请大牛们包含,欢迎指错。

  • 相关阅读:
    行转列函数listagg() WITHIN GROUP ()
    位图索引
    windows 杀掉进程
    vue 实践(过滤器)
    vue 总结
    vue v-show v-if 的使用
    vue v-for 绑定数据
    vue v-model实现数据的双向绑定
    vue .stop .self .capture .prevent 阻止冒泡
    vue v-on v-text 的运用
  • 原文地址:https://www.cnblogs.com/maomaohenshengqi/p/6554500.html
Copyright © 2011-2022 走看看