调用高德地图API

业务要求

1、定位获取用户当前经纬度，然后通过高德地图展示，以及搜索当前位置100米以内的兴趣点,并判断哪个兴趣点是当前位置（移动端）
2、详情页面展示地图（pc端，移动端）
3、pc端输入搜索，并可拖曳点坐标获取定位
4、若需要精准的打卡定位功能，推荐调用微信sdk来实现

引用步骤

一、注册账号并申请Key

首先，注册开发者账号，成为高德开放平台开发者
登陆之后，在进入「应用管理」页面「创建新应用」
为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

二、准备页面

在页面添加 JS API 的入口脚本标签

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

在build文件夹下webpack.base.conf.js文件添加

  entry: {
    app: ["babel-polyfill", "./src/main.js"]
  },
  // 此为添加的内容，与entry在同一级
  externals: {
    'AMap': 'window.AMap',
    'AMapUI': 'window.AMapUI' // ui根据需要引入，可登录高德开发平台，自定义样式
  }

在页面添加地图容器，引入模块

<div id="amap"></div>

import AMap from 'AMap'

创建地图

// 创建地图实例
  let mapObj = new AMap.Map('amap', {
    zoom: 18,
    dragEnable: true, // 拖曳平移
    zoomEnable: true, // 缩放
    keyboardEnable: false, // 键盘控制
    showBuildingBlock: true // 3D楼道效果
  })

定位

高德地图定位失败问题详解

// 调用地图定位插件
  mapObj.plugin('AMap.Geolocation', () => {
    geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, // 是否使用高精度定位，默认:true
      timeout: 10000,
      maximumAge: 0, // 定位结果缓存0毫秒，默认：0
      convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
      showButton: true, // 显示定位按钮，默认：true
      buttonPosition: 'RB', // 定位按钮停靠位置，默认：'LB'，左下角
      showMarker: false, // 定位成功后在定位到的位置显示点标记，默认：true
      showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true
      panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
      zoomToAccuracytrue: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      extensions: 'all'
    })
    // 将插件添加到实例
    mapObj.addControl(geolocation)
    // 定位
    geolocation.getCurrentPosition()
     // 监听定位成功和失败函数
    AMap.event.addListener(geolocation, 'complete', (data) => {
        // 成功情况下处理
        //_this.handComplete(data)
    })
    AMap.event.addListener(geolocation, 'error', (data) => {
      // 失败情况下处理
      //_this.handError(data)
    })
  })

搜索周边位置

// 创建地点查询类的实例
getNearBy (lng, lat) {
  let _this = this
  _this.resultList = []
  AMap.service('AMap.PlaceSearch', function () {
    let type = '汽车服务|餐饮服务|购物服务|体育休闲服务|医疗保健服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业'
    if (!nearBy) {
      nearBy = new AMap.PlaceSearch({
        type: type,
        pageSize: 150,
        pageIndex: 1,
        extensions: 'all'
      })
    }
    // 周边搜索（类型，经纬度，范围，回调函数）
    nearBy.searchNearBy('', [lng, lat], 100, function (status, result) {
      // 获取返回值做处理
      result.poiList.pois.forEach(item => {
        if (item.address && item.name) {
          _this.resultList.push(item)
        }
      })
    })
  })
}

设置点标记

// 实例化marker
addMarker (x, y) {
  mapObj.clearMap() // 清除地图上的标记
  marker = new AMap.Marker({
    position: new AMap.LngLat(x, y),
    offset: new AMap.Pixel(-29, -55), // 自定义的图标必须设置偏移量，原定位位置在图标左上角
    icon: new AMap.Icon({
      image: require('../../../assets/images/clock/map_t.png'),
      size: [58, 62],
      imageSize: [58, 62]
    })
  })
  marker.setMap(mapObj)  //在地图上添加点
}

根据输入关键字提示匹配信息

<el-input class="search-input" v-model="searchObj.formattedAddress" id="searchId" placeholder="请输入位置"></el-input>
getInputSearch () {
    let _this = this
    AMap.service(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
      let auto = new AMap.Autocomplete({
        input: 'searchId', // 输入框的id（vue中使用ref不管用）
        datatype: 'poi'
      })
      AMap.event.addListener(auto, 'select', (e) => {
      // 处理返回的匹配信息
        _this.handleSelect(e)
      })
    })
  },

经纬度转化为地址

getAddress (x, y) {
    let _this = this
    AMap.plugin(['AMap.Geocoder'], () => {
      let geocoder = new AMap.Geocoder({})
      geocoder.getAddress([x, y], (status, result) => {
        if (status === 'complete' && result.regeocode) {
          // 处理返回结果
        }
      })
    })
  },

其他

// 重置地图中心位置，点标记位置
mapObj.setCenter([经度， 纬度])
marker.setPosition([经度， 纬度])

图片展示