高德地图和截图

地图

高德地图

配置如下：

import VueAMap from "vue-amap";

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
 key: "6db0150adff8e519375d773094610fa1",
 plugin: [
   "AMap.MapType",
   'AMap.Geolocation',  //定位空间，用来获取和展示用户主机所在的经纬度位置
    'AMap.Autocomplete',  //输入提示插件
    'AMap.PlaceSearch', //POI搜索插件
    'AMap.Scale',   //右下角缩略图插件，比例尺
    'AMap.OverView', //地图鹰眼插件
    'AMap.ToolBar',  //地图工具条
    'AMap.MapType',  //类别切换空间，实现默认图层与卫星图，实施交通层之间切换的控制
    'AMap.PolyEditor', //编辑 折线多边形
    'AMap.CircleEditor',
    "AMap.Geocoder"     //地图编码
 ],
 // 默认高德 sdk 版本为 1.4.4
 v: "1.4.4"
});

定位，搜索，地图标示代码如下：

（电脑定位不准，电脑大部分没有手机的GPS，大部分是通过定位ip来定位）

<template>
  <div class="amap-p" v-if="isShow">
    <div class="map-flex">
    <div class="search-label">地图搜索：</div>
     <el-amap-search-box
       class="search-box"
       ref="searchBox"
       :search-option="searchOption"
       :on-search-result="onSearchResult"
     ></el-amap-search-box>
     </div>
     <el-amap
       class="vueAmap"
       vid="amapEdit"
       :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-marker>
       <el-amap-text
         v-for="(marker, index) in amap.markers"
         :key="'text' + index"
         :text="marker.text"
         :offset="marker.offset"
         :position="marker.position"
       ></el-amap-text>
     </el-amap>
  </div>
</template>

<script>
var vm;
// import { mapGetters } from 'vuex'
export default {
  name: 'Amap',
  props: {
    map: {
      type: [Object, Array],
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      isShow:false,
      // form对象
      dataForm:{
 lat: "27.644778",
 lon: "106.893565",
 orgAddr: "区政府"
},
      // 地图搜索对象
      searchOption: {
        city:"全国",
        citylimit: true
      },
   // 地图对象
        amap: {
          zoom: 16,
          center: [106.893565, 27.644778],
          events: {
            click(e) {
              let {
                lng,
                lat
              } = e.lnglat;
              self.lng = lng;
              self.lat = lat;
              // 这里通过高德 SDK 完成。
              var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
              });
              geocoder.getAddress([lng, lat], (status, result)=>{
                if (status === "complete" && result.info === "OK") {
                  if (result && result.regeocode) {
                    vm.dataForm.orgAddr = result.regeocode.formattedAddress;
                    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[0]=obj;
                    vm.$refs['searchBox'].keyword = result.regeocode.formattedAddress
                    vm.$emit("map", vm.amap.markers);
                  }
                }
              });
            }
          },
          plugin: ["ToolBar","Geolocation"],
          markers: [{
            //lon
            position: [106.893565, 27.644778],
            text: "区政府",
            offset: [0, 30]
          }]
        },
   }
   },
  //  computed: {
  //     ...mapGetters({
  //       isMobile:'settings/isMobile',
  //     })
  //   },
created(){
        vm = this;
},
  methods: {
  show(row){
  console.log('dasd')
  console.log(row,'5645645')
  this.isShow = true
  if (row){
    this.amap.markers[0].text = row.attendanceAddress
      this.amap.markers[0].position[0] = row.area.longitude
      this.amap.markers[0].position[1] = row.area.latitude
      this.amap.center[0]=row.area.longitude
      this.amap.center[1]=row.area.latitude
      setTimeout(()=>{
         this.$refs['searchBox'].keyword = row.attendanceAddress
      },5)
      console.log(row.attendanceAddress,'sdasda111')
      // vm.$emit("map",vm.amap.markers);
  }else{
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,//是否使用高精度定位，默认:true
          timeout: 10000,          //超过10秒后停止定位，默认：5s
          buttonPosition:'RB',    //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
        });
        // 定位可能失败，成功也可能错误
        geolocation.getCurrentPosition(function(status,result){
          if(status=='complete'){
              vm.onComplete(result)
          }else{
              vm.onError(result)
              geolocation.getCityInfo()
          }
        });
}
    },
    onComplete(data) {
      this.amap.markers[0].text = data.formattedAddress
      console.log(data.position,'4564561111')
      this.amap.markers[0].position[0] = data.position.lng
      this.amap.markers[0].position[1] = data.position.lat
      vm.$refs['searchBox'].keyword = data.formattedAddress
      console.log(data.formattedAddress,'sdasda')
      vm.$emit("map",vm.amap.markers);
    },
    //解析定位错误信息
    onError(data) {
      console.log("定位失败:"+data.message);
    },
    onSearchResult(pois) {
      console.log(vm.$refs['searchBox'],'46456')
   vm.amap.markers = [];
   let latSum = 0;
   let lngSum = 0;
   if (pois.length > 0) {
     pois.forEach((poi, index) => {
       let { 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];
     console.log('sdasdasd34')
      vm.$emit("map",vm.amap.markers);
      console.log(vm.amap.markers,'354353')
   }
 },

  }
}

</script>

<style lang="scss">
.map-flex{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.search-label{
  color:$f-grey;
  margin-left:64px;

}
.el-vue-search-box-container {
    position: relative;
    width: 486px !important;
    height: 40px !important;
    background: #fff;
    box-shadow: none !important;
    border-radius: none !important;
    z-index: 10;
}
.search-box{
  border: 1px solid $br-m;
  .search-box-wrapper{
    width: 100px;
    .search-btn{
    width:60px !important;
    background-color:$m-green3 !important;
    color: #fff;
  }
  }
}
.vueAmap{
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 134px;
  width: 486px !important;
  height: 400px !important;
}
@media screen and (max-width: 1230px) {
  .search-label{
   display: none;
}
  .amap-p{
    padding:0 10px;
    padding-right: 0px;
  }
  .el-vue-search-box-container {
    position: relative;
    width: 100% !important;
    height: 30px !important;
    background: #fff;
    box-shadow: none !important;
    border-radius: none !important;
    z-index: 10;
}
.search-box{
  margin-left:0px;
  border: 1px solid $br-m;
  .search-box-wrapper{
    width: 100px;
    .search-btn{
      font-size: 12px !important;
    width:40px !important;
    background-color:$m-green3 !important;
    color: #fff;
  }
  }
}
.vueAmap{
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 0px;
  width: 100% !important;
  height: 400px !important;
}
}
</style>

截图

 //图片格式转换方法,base64格式图片地址转为图片file文件
      dataURLToBlob(dataurl) {
        // console.log(dataurl,'fdgdfg')
        // let arr = dataurl.split(',');
        // let mime = arr[1].match(/:(.*?);/)[1];
        // let bstr = window.atob(arr[1]);
        // let n = bstr.length;
        // let u8arr = new Uint8Array(n);
        // while (n--) {
        //   u8arr[n] = bstr.charCodeAt(n);
        // }
        var byteString = window.atob(dataurl.split(',')[1])
        var mime = dataurl.split(',')[0].split(':')[1].split(';')[0]
        var ab = new ArrayBuffer(byteString.length)
        var ia = new Uint8Array(ab)
        for (var i = 0; i < byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i)
        }
        return new Blob([ab], {
          type: mime
        });
      },
      //点击方法
      handlehtml2canvas() {
        return new Promise((resolve) => {
          let self = this;
          let canvasID = self.$refs['bill'];
          console.log(canvasID,'gfdgd发达的')
          // canvasID 容器
          // let a = document.createElement('a');
        html2canvas(canvasID,{
            useCORS: true, // 【重要】开启跨域配置
            // allowTaint: true,//允许跨域图片
            taintTest: false,//是否在渲染前测试图片
				}).then(canvas => {
            setTimeout(()=>{
              console.log(canvasID,canvas,'FDGSDFG')
              let dom = document.body.appendChild(canvas);
              console.log(dom,'sfdfd111')
              document.body.removeChild(dom);
              // dom.toDataURL('image/png')拿到base64
              let blob = self.dataURLToBlob(dom.toDataURL('image/png'));
              self.fileList= blob
              self.pcmsImgUpload().then(res=>{
							resolve(res)
						})
            },2000)
            // a.style.display = 'none';
            
          });
        })
      },