高德地图API 前端调用 搜索定位

高德地图API 前端调用 搜索定位

1.申请web的KEY和密钥

2.使用 地图 JS API v2.0
地图 JS API v2.0

3.前端代码

安装

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

main.js中加入代码

 window._AMapSecurityConfig = {
	//将http://1.1.1.1:80替换为实际代理地址
  securityJsCode:'申请的安全密钥',  
}

MapContainer,vue 子组件

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

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map: null,
      marker: null,
      circle: null
    };
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "", //设置您的key
        version: "2.0",
        plugins: ["AMap.ToolBar", "AMap.Driving", "AMap.AutoComplete","AMap.PlaceSearch"],
        AMapUI: {
          version: "1.1",
          plugins: []
        },
        Loca: {
          version: "2.0"
        }
      })
        .then(AMap => {
          this.map = new AMap.Map("container", {
            viewMode: "3D",
            zoom: 11,
            zooms: [2, 22],
            center: [118.892074, 31.328678]
            //设置地图的中心点坐标
          });
          this.map.setCity("全国");//设置地图刷新之后定位的城市
        })
        .catch(e => {
          console.log(e);
        });
    },
    //父组件传入搜索的地点关键字
    searchAddress(name) {
      console.log("111----", name);
      var that = this;
      this.map.plugin("AMap.AutoComplete", function() {
        // 实例化Autocomplete
        var autoOptions = {
          city: "上海" //设置要搜素的城市区域
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(name, function(status, result) {
          let adds = result.tips.map(item => {
            return {
              label: item.name,
              value: item.id,
              location: item.location
            };
          });
          // 向父组件传值
          that.$emit("getAdds", adds);
        });
      });
    },
    // poi定位搜索附近的地点 （中心点经纬度，范围）
    placeSearch(lng, lat, radius) {
      var that = this
      this.map.plugin("AMap.PlaceSearch", function() {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
          pageSize: 100, // 单页显示结果条数
          pageIndex: 1, // 页码
          city: "025", // 兴趣点城市
          citylimit: true, //是否强制限制在设置的城市内搜索
          map: that.map, // 展现结果的地图实例
          panel: "panel", // 结果列表将在此容器中进行展示。
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });

        var cpoint = [lng, lat]; //中心点坐标
        placeSearch.searchNearBy("超市", cpoint, radius, function(status, result) {
          console.log("-------------",result)
          that.map.setFitView();
        });
      });
    },
    // 使用覆盖物画出范围
    write(lng, lat, radius) {
      var that = this;
      //如已有覆盖物，则都移除
      if (that.marker) {
        this.map.remove(that.marker);
      }
      if (that.circle) {
        this.map.remove(that.circle);
      }
      // 设置标记点和园
      this.marker = new AMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [lng, lat]
      });
      this.circle = new AMap.Circle({
        center: new AMap.LngLat(lng, lat), // 圆心位置
        radius: radius, //半径
        strokeColor: "#F33", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 3, //线粗细度
        fillColor: "#ee2200", //填充颜色
        fillOpacity: 0.35 //填充透明度
      });
      // 在地图中加入覆盖物
      this.map.add(that.marker);
      this.map.add(that.circle);
      this.placeSearch(lng, lat, radius)
      
    }
  }
};
</script>

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