基于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 ,并初始化地图，增加覆盖物标记

<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.15
        plugins: ["AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "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开头（官方要求，不然会定位失败），然后必须是手机开启定位才行，在电脑上无法定位成功

 initMap() {
      var _this = this;
      AMapLoader.load({
        key: "xxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 13, //初始化地图级别
            // center: [113.73072265943132, 34.77648371816693], //如果使用高德的定位，这个可以不用写，初始化地图中心点位置
          });
          const OPTIONS = {
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 3000,
            maximumAge: 0, //定位结果缓存0毫秒，默认：0
            convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, //显示定位按钮，默认：true
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(10, 20),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: 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类型Key
        keywords: "丹尼斯|悦来悦喜", //需要被检索的地点文本信息。多个关键字用“|”分割，文本总长度不可超过80字符
        page_size: 25, //	当前分页展示的数据条数
        page_num: 1, //请求第几分页
        location: "113.73072265943132,34.77648371816693", //坐标之间不能有空格，否则会请求不成功，中心点坐标
        radius: 3000, //	搜索半径 ,取值范围:0-50000
        output: "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.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          _this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 13, //初始化地图级别
            center: [113.73072265943132, 34.77648371816693], //初始化地图中心点位置
          });
          _this.search();
        })
        .catch((e) => {
          console.log(e);
        });
    },