使用高德API-初级应用

Posted 2020-12-08 baisedeyu

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即是对应的匹配数据
  })
})