乐趣区

关于前端:高德地图API实现定位地点搜索和周边搜索H5Vue微信小程序

jiezi

高德开放平台注册账号并申请 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)
      }
    })
  }
})
退出移动版