zoukankan      html  css  js  c++  java
  • 使用高德API-初级应用

    1.进入高德开放平台

    2.注册账号

    3.注册应用后会得到1个key

    4.在html页面添加

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 

    一.游览器定位

    AMap.plugin('AMap.Geolocation', function() {
      var geolocation = new AMap.Geolocation({
        // 是否使用高精度定位,默认:true
        enableHighAccuracy: true,
        // 设置定位超时时间,默认:无穷大
        timeout: 10000,
        // 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
        buttonOffset: new AMap.Pixel(10, 20),
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
        zoomToAccuracy: true,     
        //  定位按钮的排放位置,  RB表示右下
        buttonPosition: 'RB'
      })
    
      geolocation.getCurrentPosition()
      AMap.event.addListener(geolocation, 'complete', onComplete)
      AMap.event.addListener(geolocation, 'error', onError)
    
      function onComplete (data) {
        // data是具体的定位信息
      }
    
      function onError (data) {
        // 定位出错
      }
    })

    二.ip定位(精确定位失败后用ip定位)

    AMap.plugin('AMap.CitySearch', function () {
      var citySearch = new AMap.CitySearch()
      citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          // 查询成功,result即为当前所在城市信息
        }
      })
    })

    三.逆向地理编码(使用IP定位后 可以用逆向地理编码获取地址)

    AMap.plugin('AMap.Geocoder', function() {
      var geocoder = new AMap.Geocoder({
        // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
        city: '010'
      })
     
      var lnglat = [116.396574, 39.992706]
    
      geocoder.getAddress(lnglat, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            // result为对应的地理位置详细信息
        }
      })
    })

    四.输入提示插件

    AMap.plugin('AMap.Autocomplete', function(){
      // 实例化Autocomplete
      var autoOptions = {
        //city 限定城市,默认全国
        city: '全国'
      }
      var autoComplete= new AMap.Autocomplete(autoOptions);
      autoComplete.search(keyword, function(status, result) {
        // 搜索成功时,result即是对应的匹配数据
      })
    })

     

  • 相关阅读:
    解决uniapp中app.vue的onlaunch不能跳转页面问题
    参数校验注解,备用
    码云推送项目总是没有权限
    一句话解释回调函数
    动态管理
    转:用jupyter notebook打开指定目录下的.ipynb文件
    gcn变体
    图4
    节点分类
    图3
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13067343.html
Copyright © 2011-2022 走看看