vue-amap搜索定位，多边形遮罩，自定义点坐标, 获取天气

main.js里面配置

可以根据自己的样式进行修改

<template>
  <div>
    <div>
      <el-amap-search-box
          class="search-box"
          :search-option="searchOption"
          :on-search-result="onSearchResult"
        >
          <!-- 搜索条件 是个对象 属性是city城市名，citylimit：false； 搜索回调函数 -->
        </el-amap-search-box>
    </div>
    <el-amap vid="amap"
        class="amap-demo"
        :amap-manager="amapManager"
        :plugin="plugin"
        :events="events"
        :center="center"
        :zoom="zoom">
        <!-- 点标记在地图上显示的位置，默认为地图中心点， -->
        <!-- 当前为自定义icon 不需要自定义icon的情况下把icon去掉 -->
        <el-amap-marker v-for="(marker,index) in markers" :key="'marker'+index" :position="marker.position" :icon="marker.icon"></el-amap-marker>
        <el-amap-polygon
          v-for="(polygon, index) in polygons"
          :key="index"
          :vid="index"
          :bubble="false" 
          :ref="`polygon_${index}`"
          :path="polygon.path"
          :editable="true"
          strokeStyle="dashed"
          strokeColor="#FF0000"
          strokeWeight="2"
          strokeOpacity="0.8"
          fillOpacity="0.3"
          fillColor="#1791fc"
          :events="polygon.events"
        >
          <!-- bubble：设为true可以冒泡触发地图上的点击事件 -->
          <!-- events:绑定事件不这样进行绑定事件不生效 -->
        
        </el-amap-polygon>
    </el-amap>
  </div>
</template>

<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
let Geocoder; //先声明变量
export default {
  data() {
    const self = this;
    return {
      amapManager,
      center: [0, 0],//地图中心点位
      loaded: false,
      zoom: 14,//地图的缩放级别
      input: "",//存搜索框内容
      searchOption: {//搜索范围
        city: "全国",
        citylimit: false
      },
      polygons: [//遮罩参数
        {
          path: [[118.172996,24.473984],[118.174923,24.474724],[118.175307,24.475323],[118.174834,24.474746],[118.175017,24.47515],[118.175308,24.475323]],//这里需要二维数组
          events:{
            // 初始化
            init:e => {
              console.log(e)
            },
            //多边形点击事件
            click:e => {
              console.log(e)
            },
            //多边形可编辑情况下的拖动事件
            adjust:e => {
              console.log(e)
            }
          }
        }
      ],
      addressComponent: {},//暂存获取的位置信息
      markers: [
        {
          id:'yuan',
          icon: require('@/assets/point1.png'),
          offset: [-16, -16],
          position:[118.172996,24.473984]
        }
      ], //标记
      events: {
        init: o => {
          o.setMapStyle("amap://styles/b4cc85901de6484772e2f4d3cba2f835"); //初始化地图主题
        },
        click: e => {
          //地图的点击事件，获取坐标
          self.center = [e.lnglat.lng, e.lnglat.lat];
          self.markers = [];
          self.markers.push({
          id:'yuan',
          icon:require('../assets/point1.png'),
          offset: [-16, -16],
          position:self.center
        });
          Geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });
          let that = this;
          Geocoder.getAddress(self.center, function(status, result) {
            //根据坐标获取位置信息
            console.log(result)
            if (status === "complete" && result.info === "OK") {
              self.input = result.regeocode.formattedAddress;
              that.addressComponent = result.regeocode.addressComponent;
              document.querySelector(".search-box-wrapper input").value = self.input;
            }
          });
        }
      },
      plugin: [
        {
          pName: "Geocoder",
          events: {
            init: o => {
              console.log(o);
              Geocoder = o; // o 则是AMap.Geocoder的实例 对外部的Geocoder变量进行赋值，在任何地方就都可以使用
              //data里的events中使用了Geocoder
              o.getAddress(self.center, function(status, result) {
                //根据坐标获取位置
                if (status === "complete" && result.info === "OK") {
                  self.input = result.regeocode.formattedAddress;
                  document.querySelector(".search-box-wrapper input").value = self.input;
                }
              });
            }
          }
        },
      ]
    };
  },
  mounted(){
    //获取当前位置坐标
    this.getLocation();
  },
  methods:{
       //点击搜索后触发的事件
    onSearchResult(pois) {
      this.input = document.querySelector('.search-box-wrapper input').value
      this.center = [pois[0].lng, pois[0].lat] //选择了第一个值
      this.markers = [] //标记点先清空
      this.markers.push({
          id:'yuan',
          icon:require('@/assets/point1.png'),
          offset: [-16, -16],
          position:[pois[0].lng, pois[0].lat]
        }) //把搜索的位置的第一个值存入标记中并显示标记点
    },
    getLocation() {
      let that = this
      var map = new AMap.Map('container', {
        resizeEnable: true
      })
      console.log(map)
      AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 2000, //超过2秒后停止定位，默认：5s
          buttonPosition: 'RB', //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
        })
        geolocation.getCurrentPosition(function(status, result) {
          if (status == 'complete') {
            //成功后调用解析定位函数
            that.onComplete(result)
          } else {
            that.onError(result)
          }
        })
      })
    },
    //解析定位结果
    onComplete(data) {
      let localMsg = data.formattedAddress
      let local = data.position
      this.center = [local.lng, local.lat]
      this.markers.push({
          id:'yuan',
          icon:require('../assets/point1.png'),
          offset: [-16, -16],
          position:[local.lng, local.lat]
        })
      this.input = localMsg;
      document.querySelector('.search-box-wrapper input').value = localMsg
      // this.signAddress = data.formattedAddress;
    },
    //解析定位错误信息
    onError(data) {
      console.log('定位失败:' + data.message);
      this.getLngLatLocation();
    },
    getLngLatLocation() {
      let that = this;
      AMap.plugin("AMap.CitySearch", function() {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function(status, result) {
          
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            that.center = [result.bounds.nc.lng,result.bounds.nc.lat];
            that.input = result.province + result.city;
            document.querySelector('.search-box-wrapper input').value = result.province + result.city;
          }
        });
      });
    },
  }
};
</script>

获取天气

AMap.plugin('AMap.Weather', function() {
          //创建天气查询实例
          var weather = new AMap.Weather();
          //执行实时天气信息查询
          weather.getLive('厦门市', function(err, data) {
            localStorage.setItem('weather', JSON.stringify(data));
          })
        })