基于vue的H5页面中使用高德地图定位，搜索周边商户，覆盖物标记

首先安装高德地图插件

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

地图承载容器

<template><div id="container"></div>
</template>

地图容器样式

<style  scoped>#container{padding:0px;margin: 0px;width: 100%;height: 800px;}
</style>

引入 JS API Loader ,并初始化地图，增加覆盖物标记marker

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";
import Qs from "qs";
export default {data() {return {map: null,marker: [],arr: [{name: "如意湖",icon: "https://img1.baidu.com/it/u=3590267805,2648573622&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",ip1: 113.73241336023165,ip2: 34.77923169201559,},],};},mounted() {this.initMap();},methods: {initMap() {var _this = this;AMapLoader.load({key: "xxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map("container", {//设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 13, //初始化地图级别center: [113.73072265943132, 34.77648371816693], //初始化地图中心点位置});for (var i = 0; i < _this.arr.length; i++) {var content = `<div class='marker-wrap'><img  src='${_this.arr[i].icon}' /><div class='marker-txt'>${_this.arr[i].name}</div></div>`; //自定义覆盖物内容var markerItem = new AMap.Marker({position: [_this.arr[i].ip1, _this.arr[i].ip2], // 经纬度offset: new AMap.Pixel(-13, -20), //覆盖物偏移量content: content, //自定义内容});markerItem.on("click", _this.markerClick); //为覆盖物增加点击事件markerItem.setExtData({ deviceMarkId: _this.arr[i] }); //为覆盖物点击事件增加自定义参数_this.marker.push(markerItem); //在地图上渲染覆盖物}this.map.add(this.marker);}).catch((e) => {console.log(e);});},markerClick(e) {var demo = e.target.getExtData();console.log("demo: ", demo);},},
};
</script>

高德地图实现定位，域名必须是https开头（官方要求，不然会定位失败），然后必须是手机开启定位才行，在电脑上无法定位成功，AMap.Geolocation

 initMap() {var _this = this;AMapLoader.load({key: "xxxx", // 申请好的Web端开发者Key，首次调用 load 时必填version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map("container", {//设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 13, //初始化地图级别// center: [113.73072265943132, 34.77648371816693], //如果使用高德的定位，这个可以不用写，初始化地图中心点位置});const OPTIONS = {// 是否使用高精度定位，默认：trueenableHighAccuracy: true,// 设置定位超时时间，默认：无穷大timeout: 3000,maximumAge: 0, //定位结果缓存0毫秒，默认：0convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true, //显示定位按钮，默认：true// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)buttonOffset: new AMap.Pixel(10, 20),//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsezoomToAccuracy: true,showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true//  定位按钮的排放位置,  RB表示右下buttonPosition: "RB",};var geolocation = new AMap.Geolocation(OPTIONS);_this.map.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, "complete", onComplete);AMap.event.addListener(geolocation, "error", onError);function onComplete(data) {console.log("data: ", data);// data是具体的定位信息}function onError(err) {console.log("err: ", err);// 定位出错}}).catch((e) => {console.log(e);});},

高德地图实现周边搜索，关键字搜索，检索不得超过80个字符，分页返回，每页最大值为25条，搜索结果截图如下

  search() {var params = {key: "xxx", //用户在高德地图官网申请Web服务API类型Keykeywords: "丹尼斯|悦来悦喜", //需要被检索的地点文本信息。多个关键字用“|”分割，文本总长度不可超过80字符page_size: 25, //	当前分页展示的数据条数page_num: 1, //请求第几分页location: "113.73072265943132,34.77648371816693", //坐标之间不能有空格，否则会请求不成功，中心点坐标radius: 3000, //	搜索半径 ,取值范围:0-50000output: "json", //返回结果格式类型,};axios({url: "https://restapi.amap.com/v5/place/around?" + Qs.stringify(params),method: "get",headers: {"Content-Type": "application/x-www-form-urlencoded",},}).then((res) => {console.log("res: ", res);});},initMap() {var _this = this;AMapLoader.load({key: "xx", // 申请好的Web端开发者Key，首次调用 load 时必填version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {_this.map = new AMap.Map("container", {//设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 13, //初始化地图级别center: [113.73072265943132, 34.77648371816693], //初始化地图中心点位置});_this.search();}).catch((e) => {console.log(e);});},

高德地图实现定位城市及详细经纬度，geolocation.getCurrentPosition，geolocation.getCityInfo

initMap() {var that = this;AMapLoader.load({key: "xxx", // 申请好的Web端开发者Key，首次调用 load 时必填version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {that.map = new AMap.Map("container", {resizeEnable: true,//设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 16, //初始化地图级别// center: [113.73072265943132, 34.77648371816693], //初始化地图中心点位置});const OPTIONS = {// 是否使用高精度定位，默认：trueenableHighAccuracy: true,// 设置定位超时时间，默认：无穷大timeout: 3000,maximumAge: 0, //定位结果缓存0毫秒，默认：0convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true, //显示定位按钮，默认：true// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)buttonOffset: new AMap.Pixel(10, 20),//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsezoomToAccuracy: true,showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true//  定位按钮的排放位置,  RB表示右下buttonPosition: "RB",};var geolocation = new AMap.Geolocation(OPTIONS);that.map.addControl(geolocation);geolocation.getCityInfo((status, result) => {if (status == "complete") {console.log(result)geolocation.getCurrentPosition((status1, result1) => {if (status1 == "complete") {console.log(result1)} else {console.log(result1)}});} else {console.log(result)}});}).catch((e) => {console.log(e);});},