zoukankan      html  css  js  c++  java
  • 百度地图的js导入及使用

    做页面,地图可能会用到

    1 导入百度地图的js库

    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.4&ak=&services=&t=20150522093217"></script>

    2 页面html相关标签

    <div class="form-group">
    <label class="control-label">地址:</label>
    <input class="form-control input-md" ng-blur="initBap()"name="address" ng-model="address"/>
    </div>
    <!-- 百度地图显示区域 -->
    <div class="form-group" id="container" style=" 100%;height: 500px;"></div>

    在这里,我是用了一个离焦事件,这个可以因情而异,另外我是angulatjs框架

    3 下面就是js部分

    /**
    * 初始化地址
    */
    $scope.address = null;
    /**
    * 初始化经度
    */
    $scope.longitude = 121.48;
    /**
    * 初始化纬度
    */
    $scope.latitude= 31.22;
    /**
    * 初始化百度地图
    */
    $scope.initBap = function () {
    $scope.map = new BMap.Map("container"); // 创建地图实例
    $scope.map.centerAndZoom(new BMap.Point($scope.longitude, $scope.latitude), 18); // 初始化地图,设置中心点坐标和地图级别
    $scope.map.addControl(new BMap.NavigationControl());
    $scope.map.addControl(new BMap.ScaleControl());
    $scope.map.addControl(new BMap.OverviewMapControl());
    $scope.map.enableScrollWheelZoom(true);
    // 创建地址解析器实例
    $scope.myGeo = new BMap.Geocoder();

    /**
    * 监听地图点击事件,获取点击处建筑物名称
    */
    $scope.map.addEventListener("click", function (e) {
    var pt = e.point;
    $scope.longitude = pt.lng;
    $scope.latitude = pt.lat;
    console.log( $scope.longitude+ "---"+$scope.latitude)
    $scope.myGeo.getLocation(pt, function (rs) {
    var addComp = rs.addressComponents;
    /**
    * 将获取到的建筑名赋值给$scope.address
    */
    $scope.address = addComp.province != addComp.city ? addComp.province + addComp.city : addComp.city + addComp.district + addComp.street + addComp.streetNumber;
    /**
    * 通知angularjs更新视图
    */
    $scope.$digest();
    });
    });
    /**
    * 初始化查询配置
    * @type {BMap.LocalSearch}
    */
    $scope.local = new BMap.LocalSearch($scope.map, {
    renderOptions: {
    map: $scope.map,
    panel: "results",
    autoViewport: true,
    selectFirstResult: true
    },
    pageCapacity: 8
    });
    /**
    * 监听地址改变事件,当地址输入框的值改变时
    */
    $scope.$watch('address', function () {
    /**
    * 查询输入的地址并显示在地图上、调整地图视野
    */
    $scope.local.search($scope.address);
    /**
    * 将输入的地址解析为经纬度
    */
    $scope.myGeo.getPoint($scope.address, function (point) {
    if (point) {
    /**
    * 将地址解析为经纬度并赋值给$scope.longitude和$scope.latitude
    */
    $scope.longitude = point.lng;
    $scope.latitude = point.lat;
    }
    });
    });
    };

    4 以下为效果

    可以点击获取经纬度

  • 相关阅读:
    基于OpenVINO的端到端DL网络-A Year in Computer Vision中关于图像增强系列部分
    基于OpenVINO的端到端DL网络-Tesseract5+VS2017+win10源码编译攻略
    基于OpenVINO的端到端DL网络-Intel AI DevCloud 的申请和登陆
    OpenCV和RTSP的综合研究
    基于OpenVINO的端到端DL网络-包含目录、库目录、附加包含目录、附加库目录、附加依赖项之详解【正确的目录添加方法】
    消除临时对象
    Redis数据导入工具优化过程总结
    清楚利弊,用好内联
    STL区间成员函数及区间算法总结
    高效的使用STL
  • 原文地址:https://www.cnblogs.com/zhaoblog/p/6427487.html
Copyright © 2011-2022 走看看