高德地图API实现定位、地点搜索和周边搜索(H5/Vue/微信小程序)

高德开放平台注册账号并申请Key

高德地图JS API 2.0 文档

JS API 2.0版本提供了两种方式引入JSAPI：

• JSAPI Loader（推荐）
• 直接引入JSAPI脚本 <script src = 'https://webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>

这里采取的是JSAPI Loader的方式（可有效避免异步加载问题，且多次执行加载操作时不会重复请求网络资源等）。

1. 普通html页面

在页面创建地图对象

<!-- 地图容器 -->
<div id="container"></div>
<script src="https://webapi.amap.com/loader.js"></script>
<script> let AMap = null; 
  AMapLoader.load({
    "key": "你的key", // Web端 (JSAPI) key，首次调用load必填
    "version": "2.0", // JSAPI版本，默认 1.4.15
    "plugins": ["AMap.Geolocation", "AMap.PlaceSearch"], // 要使用的插件列表
  }).then((map) => {
    AMap = map;
    initMap()
  }).catch((e) => {
    // 高德地图加载失败
    console.error(e)
  })
  
  // 渲染地图到页面（要在服务器环境才能渲染成功）
  function initMap() {
    let map = new AMap.Map('container', {
      center: [116.857461, 38.310582], // 地图中心点坐标
      zoom: 15, // 地图缩放级别 
    });
  } </script>
复制代码

获取定位

// 获取位置
function getLocation() {
  let geolocation = new AMap.Geolocation({
    enableHighAccuracy: true, // 是否获取高精度定位，可能影响效率，默认false
    timeout: 10000, // 定位超时时间，ms
    needAddress: true, // 是否需要将定位结果进行逆地理编码操作
    extensions: 'all', // 是否需要详细的你地理编码信息，默认'base'
  })
  // 获取精确位置
  geolocation.getCurrentPosition(function(status, result) {
    console.log(status);
    console.log(result);
  })
  // 获取城市信息
  geolocation.getCityInfo(function(status, result) {
    console.log(status);
    console.log(result);
  })
}
复制代码

地点搜索

// 地址搜索
function placeSearch(search) {
  if(!search) return;
  let placeSearch = new AMap.PlaceSearch({
    city: '沧州市', // 兴趣点城市，支持城市名、citycode、adcode
    citylimit: true, // 是否强制在设置的城市内搜索，默认false
    // type: '', // 兴趣点类别，用‘|’分隔，默认：'餐饮服务|商务住宅|生活服务'
    pageSize: 20, // 每页条数，默认10，范围1-50
    pageIndex: 1, // 页码
    extensions: 'all', // 默认base，返回基本地址信息；all：返回详细信息
    // map: map, // 地图实例，可选
    // panel: 'panel', // 结果列表的id容器，可选 
    autoFitView: true, // 是否自动调整地图视野到marker点都处于可见范围
  })
  placeSearch.search(search, function(status, result) {
    console.log(result)
  })
}
复制代码

周边搜索

// 周边搜索
function searchNear() {
  let placeSearch = new AMap.PlaceSearch({
    // city: '', // 兴趣点城市
    citylimit: true, // 是否强制在设置的城市内搜索，默认false
    // type: '', // 兴趣点类别，用‘|’分隔，默认：'餐饮服务|商务住宅|生活服务'
    pageSize: 20, // 每页条数，默认10，范围1-50
    pageIndex: 1, // 页码
    extensions: 'all', // 默认base，返回基本地址信息；all：返回详细信息
    // map: map, // 地图实例，可选
    // panel: 'panel', // 结果列表的id容器，可选 
    // autoFitView: true, // 是否自动调整地图视野到marker点都处于可见范围
  })

  let keywords = '', // 关键字
      position = [116.857461, 38.310582], // 中心点经纬度
      radius = 2000; // 搜索半径 0-50000
  placeSearch.searchNearBy(keywords, position, radius, function(status, result) {
    console.log(result)
  })
}
复制代码

2. Vue

安装 npm i @amap/amap-jsapi-loader --save

使用

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { AMapKey_H5 } from '@/config.js'
let AMap = null
export default {
  created() {
    this.initAMap()
  },
  methods: {
    initAMap() {
        const that = this
        AMapLoader.load({
            "key": AMapKey_H5,
            "version": '2.0',
            "plugins": ['AMap.PlaceSearch', 'AMap.Geolocation']
        }).then((map) => {
            AMap = map
            // 其他功能同h5
        }).catch(e => {
            console.log('高德地图加载错误', e)
        })
    }
    
  }
}
</script>
复制代码

3. 微信小程序（小程序的key和web端的不同，需重新创建）

文档

SDK下载地址

const amapFile = require('../../common/amap-wx.130.js')
import { AMapKey_WX } from '../../config.js'
Page({
  data: {
    latitude: '',
    longitude: ''
  },
  onLoad: function() {
    this.initAMap()
  },
  initAMap() {
    const that = this
    wx.getLocation({
      success: function(res) {
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude
        }, function() {
          that.loadCity()
        })
      }
    })
  },
  // 获取位置信息
  loadCity() {
    const AMapWx = new amapFile.AMapWX({key: AMapKey_WX})
    const that = this
    let { longitude, latitude } = this.data
    AMapWx.getRegeo({
        extensions: 'base',
        location: `${longitude},${latitude}`,
        success: function(res) {
            console.log(res)
            // 返回结果包含省、市、区，地址描述（例：沧州市工业和信息化局附近），和附近POI
        },
        fail: function(res) {
            console.log(res)
        }
    })
  },
  // 地点搜索
  placeSearch(search) {
    const AMapWx = new amapFile.AMapWX({key: AMapKey_WX})
    const that = this
    AMapWx.getInputtips({
      keywords: search, // 查询关键词
      city: '沧州市', // 兴趣城市
      citylimit: true, // 是否限制在当前城市内搜索
      pageSize: 40, // 单页显示结果的条数
      pageIndex: 1, // 页码
      // location: '', // 经纬度 用逗号隔开的字符串
      success: function(data) {
        if(data && data.tips) {
          that.setData({
            poisList: data.tips
          })
        }
      }
    })
  },
  // 检索周边的POI
  getPOIAround(search) {
    const AMapWx = new amapFile.AMapWX({key: AMapKey_WX})
    const that = this
    let { longitude, latitude } = this.data
    AMapWx.getPoiAround({
      querykeywords: search, // 检索关键词
      location: `${longitude},${latitude}`,
      success: function(res) {
          console.log('检索成功')
          console.log(res)
          that.poisList = res.poisData
      },
      fail: function(res) {
          console.log(res)
      }
    })
  }
})