高德地图API与Vue集成实践-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45966782/article/details/127086446
public：index： 
<script>
    window._AMapSecurityConfig = {
      securityJsCode: '',// 密钥
    }
  </script>

  <script src="https://webapi.amap.com/maps?v=1.4.15&key=&plugin=AMap.CircleEditor,AMap.Geolocation,AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch,AMap.CitySearch"></script>
  <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.4.11"></script>


main: 
import VueAMap from 'vue-amap'    
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
	key: '', // 高德的key
	// 插件集合
	plugin: [
		'AMap.CircleEditor', // 圆形编辑器插件
		"AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
		"AMap.Geocoder", // 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换
		"AMap.Autocomplete",
		"AMap.PlaceSearch",
		"AMap.CitySearch",
	],
	// 高德 sdk 版本，默认为 1.4.4
	v: '2.0.0'
});


Vue.directive('longpress', function (el, binding){
  var timer = null;
  var start = function (e) {
      // 如果是点击事件，不启动计时器，直接返回
      if (e.type === 'click'){
          return
      }
      if (timer == null){
          // 创建定时器 ( 2s之后执行长按功能函数 )
          timer = setTimeout(function () {
              //执行长按功能函数
              binding.value()
          },2000)
      }
  }
  var cancel = function () {
      if (timer !== null){
          clearTimeout(timer)
          timer = null
      }
  }

  // 添加事件监听器
  el.addEventListener("mousedown", start);
  el.addEventListener("touchstart", start);

  // 取消计时器
  el.addEventListener("click", cancel);
  el.addEventListener("mouseout", cancel);
  el.addEventListener("touchend", cancel);
  el.addEventListener("touchcancel", cancel);
})


router.beforeEach((to, from, next) => {    
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next()
})





页面: 
<template>
  <div class="map_box">
    <div>
      <div class="map_box_top"></div>
      <div class="map_box_pox">
        <div class="map_box_sure" @click="doemMap">
          <img src="../assets/img/left.png" alt="" />
        </div>
        <el-amap-search-box
          :search-option="searchOption"
          :on-search-result="onSearchResult"
        />
        <div class="map_box_sure1xwx" @click="goHome">
          <span>确定</span>
        </div>
      </div>
      <!-- //搜索框 -->

      <!-- 地图 -->
      <el-amap
        class="amap-box"
        :zoom="amap.zoom"
        :center="amap.center"
        :plugin="amap.plugin"
        :events="amap.events"
      >
        <!-- 当前位置图标 -->
        <el-amap-marker
          v-for="(marker, index) in amap.markers"
          :key="'marker' + index"
          :position="marker.position"
        />
        <!-- 位置名称显示 -->
        <el-amap-text
          v-for="(marker, index) in amap.markers"
          :key="'text' + index"
          :text="marker.text"
          :offset="marker.offset"
          :position="marker.position"
        />
      </el-amap>
    </div>
    <!-- <div class="pox" v-if!="dataForm.orgAddr">
      <van-loading type="spinner" />
      <div class="pox_size">地图加载中</div>
    </div> -->
  </div>
</template>
<script>
export default {
  name: "Map",
  data() {
    const vm = this;
    return {
      // form对象
      dataForm: {
        lat: "",
        lon: "",
        orgAddr: "",
        province: "",
        city: "",
        district: "",
      },
      // 地图搜索对象
      searchOption: {
        // city: "全国",
        // citylimit: true,
      },
      lng: 0,
      lat: 0,
      // 地图对象
      amap: {
        zoom: 16,
        center: [116.319802, 39.98294],
        enableHighAccuracy: true,
        events: {
          // 点击获取地址的数据
          click(e) {
            const { lng, lat } = e.lnglat;
            vm.dataForm.lon = lng;
            vm.dataForm.lat = lat;
            // 这里通过高德 SDK 完成。
            var geocoder = new window.AMap.Geocoder({
              radius: 100,
              extensions: "all",
            });
            geocoder.getAddress([lng, lat], function (status, result) {
              if (status === "complete" && result.info === "OK") {
                if (result && result.regeocode) {
                  vm.dataForm.orgAddr = result.regeocode.formattedAddress;
                  vm.dataForm.province =
                    result.regeocode.addressComponent.province;
                  vm.dataForm.city = result.regeocode.addressComponent.city;
                  vm.dataForm.district =
                    result.regeocode.addressComponent.district;
                  vm.dataForm.lat = lat ? lat.toString() : "";
                  vm.dataForm.lon = lng ? lng.toString() : "";
                  vm.amap.markers = [];
                  const obj = {
                    position: [lng, lat],
                    text: result.regeocode.formattedAddress,
                    offset: [0, 30],
                  };
                  vm.amap.markers.push(obj);
                  vm.sure();
                }
              }
            });
            vm.$nextTick();
          },
        },

        plugin: [
          {
            // 定位
            pName: "Geolocation",
            events: {
              init(o) {
                // o是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  if(result) {
                    vm.dataForm.lat = result.position.lat;
                  vm.dataForm.lon = result.position.lng;
                  vm.dataForm.orgAddr = result.formattedAddress;
                  vm.dataForm.province = result.addressComponent.province;
                  vm.dataForm.city = result.addressComponent.city;
                  vm.dataForm.district = result.addressComponent.district;
                  }
                  if (result && result.position) {
                    // 设置经度
                    vm.lng = result.position.lng;
                    // 设置维度
                    vm.lat = result.position.lat;
                    // 设置坐标
                    vm.amap.center = [vm.lng, vm.lat];
                    let op = {
                      position: [vm.lng, vm.lat],
                      text: result.formattedAddress,
                      offset: [0, 30],
                    };
                    vm.amap.markers.push(op);
                    // 页面渲染好后
                    vm.$nextTick();
                  }
                });
              },
            },
          },
        ],
        //
        markers: [],
      },
    };
  },
  created() {
    // console.log(11);
    // this.dataForm.lat = ''
    // this.dataForm.lon = ''
    // this.dataForm.orgAddr = ''
    // this.dataForm.province = ''
    // this.dataForm.city = ''
    // this.dataForm.district = ''
  },
  methods: {
    // 地图搜索回调
    onSearchResult(pois) {
      console.log(pois,'poispois')
      const vm = this;
      vm.amap.markers = [];
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        pois.forEach((poi, index) => {
          const { lng, lat } = poi;
          if (index === 0) {
            lngSum = lng;
            latSum = lat;
            const obj = {
              position: [poi.lng, poi.lat],
              text: poi.name,
              offset: [0, 30],
            };
            vm.amap.markers.push(obj);
            vm.dataForm.orgAddr = poi.name;
            vm.dataForm.lat = poi.lat ? poi.lat.toString() : "";
            vm.dataForm.lon = poi.lng ? poi.lng.toString() : "";
          }
        });
        vm.amap.center = [lngSum, latSum];
      }
    },
    // 提交方法
    sure() {
      const vm = this;
      let a = vm.dataForm;
      vm.dataForm = a;
    },
    // 确定坐标
    goHome() {
      this.$router.go(-1);
      sessionStorage.setItem("dataForm", JSON.stringify(this.dataForm));
      // this.$router.push({
      //   path: "/",
      //   query: {
      //     // dataForm: dataForm
      //   },
      // });
    },
    doemMap() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
.map_box_top{
  height: 2.5875rem;
  width: 100%;
  background: #99999973;
}
.map_box_pox {
  // margin-top: 2.5875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.map_box_sure {
  line-height: 46px;
  width: 15%;
  text-align: center;
  color: #ffffff;
  display: flex;
  align-items: center;
  > img {
    height: 1.875rem;
  }
}
.amap-box {
  height: 44vh;
  height: calc(100vh - 45px);
}
.el-vue-search-box-container {
  // top: 45px;
  width: 65% !important;
}
.search-box {
  position: absolute;
  z-index: 5;
  width: 70%;
  left: 13%;
  top: 10px;
  height: 30px;
}

.search-box .el-input {
  float: left;
  width: 100%;
  height: 100%;
  // box-sizing: border-box;
  border-radius: 0 7px 7px 0;
  outline: none;
  position: relative;
}
::v-deep .el-vue-search-box-container .search-box-wrapper input {
  flex: 1;
  height: 30px;
  line-height: 20px;
  letter-spacing: 0.5px;
  font-size: 14px;
  text-indent: 10px;
  // box-sizing: border-box;
  border: none;
  outline: none;
  border: 1px solid #999999a1;
  border-radius: 5px;
  margin-left: -30px;
}
::v-deep .el-vue-search-box-container .search-tips ul li {
  height: 40px;
  width: 258px;
  line-height: 40px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
  padding: 0 10px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

::v-deep .el-vue-search-box-container .search-tips {
  position: absolute;
  top: 100%;
  border: 1px solid #dbdbdb;
  background: #fff;
  overflow: auto;
  margin-left: -30px;
  /* left: 0; */
}
::v-deep .amap-geolocation-con {
  position: absolute;
  z-index: 9999;
  display: flex;
  width: 96%;
  justify-content: flex-end;
  bottom: 30% !important;
}

.search-box .el-button {
  position: absolute;
  right: 0;
  top: 1px;
  width: 20%;
  background: #38a28a;
  border-radius: 0 7px 7px 0;
  border: none;
  color: #fff;
  outline: none;
}

.tip-box {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 35px;
  padding: 10px 0;
  background-color: #fff;
  opacity: 0.8;
}
.map_box_sure1xwx {
  line-height: 30px;
  width: 15%;
  text-align: center;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5381ff;
  border-radius: 4px 4px 4px 4px;
}
::v-deep .el-vue-search-box-container {
  position: relative;
  width: 360px;
  height: 45px;
  background: #fff;
  box-shadow: none;
  border-radius: 2px 3px 3px 2px;
  z-index: 10;
}
.pox{
  // height: 100vh;
  // width: 100vw;
  // background: #00000070;
  position: fixed;
  flex-direction: column;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pox_size{
  margin-top: 10px;
  font-weight: 550;
}
</style>
vue地图单个打点定位
