高德开放平台注册账号并申请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 = nullexport 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) } }) }})