【无标题】

聊一个地图组件吧-()vue-amap)

这个组件可以满足一些简单的需求,感觉比高德原生要有好一点,当然复杂的需求还是用高德吧(一般需求也够用)

首先肯定是npm一下

npm install -S vue-amap

然后启动项目
在 main.js中设置以下内容(全局引入)

import AMap from 'vue-amap';
Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
// 高德的key ,  key自己去高德官网申请(先去创建一个服务,然后会生成key跟密钥)
  key: 'xxxx',
  // 插件集合 （插件按需引入  https://developer.amap.com/api/javascript-api/guide/abc/plugins/）
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',
    'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.DistrictSearch','AMap.CircleMarker','AMap.Polyline'
    // 'AMap.Object3DLayer', 'AMap.Object3D'
  ]
});
//高德的安全密钥
window._AMapSecurityConfig = {
  securityJsCode: 'xxxxxxxxx',
}

然后就可以去页面文件使用了

<template>

 <div class="amapr">
    <div :style="{width:'100%',height:'300px'}">
   <!--地图的主体 -->
       <el-amap
        class="map"
        vid="amapEdit"
        :zoom="amap.zoom"
        :center="amap.center"
        :plugin="amap.plugin"
        :events="amap.events"
      >
	    <!-- 标记主体  一定要写在地图主体里面 !!  -->
	     <el-amap-marker
       v-for="(marker, index) in markers"
          <!-- 标记点位  -->
        :position="marker.position"
        <!-- 标记title  --> 
        :key="index"
         :vid="index"
      ></el-amap-marker>
      </el-amap>
       <!--
          amap-manager： 地图管理对象
          vid：地图容器节点的ID
          zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
          center： 地图中心点坐标值
          plugin：地图使用的插件
          events： 事件
        -->
    </div>
  <div class="addr-info">
      <div>当前位置:{{ address ||"-"}}</div>
      <div>当前经度:{{ lng ||"-"}}</div>
      <div>当前纬度:{{ lat ||"-"}}</div>
    </div>
  </div>
  </template>

export default {
  name: "Map",
  props: {},
  data() {
   let _this = this;  //  外面定义 里面拿不到this
    return {
      // 地图对象
      amap: {
        lng: "",
        lat: "",
        zoom: 15,  //地图视角
        center: [120.60904204845428, 30.001987338249048],//中心点位
        //  点击事件,点击地图,会拿到当前点位的经纬度
        events: {
           click(e) {
            console.log(e, "e");
            let { lng, lat } = e.lnglat;
            self.lng = lng;
            self.lat = lat;
            _this.lng = lng;
            _this.lat = lat;
            _this.markers = [];
            _this.markers = [{ position: [lng, lat] }];
            //  下面是获取位置名
             let geocoder = new window.AMap.Geocoder({});
             geocoder.getAddress(_this.markers[0].position, function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                       _this.markers.push({
                  position: [lng, lat],
                  events:{
                    click(){
                      console.log('点击标点触发的事件')
                            _this.windows.forEach(window => {
                             window.visible = false; //关闭窗体
                        });
                        _this.window = _this.windows[0];
                        _this.$nextTick(() => {
                        _this.window.visible = true;//点击点坐标，出现信息窗体
                    });
                    }
                  }
                })
                _this.address = result.regeocode.formattedAddress;
                _this.windows=[]
                      _this.windows.push({
                        position: [_this.lng,_this.lat],
                        visible: false,
                        offset:[0,-20],//窗体偏移
                        content: `<div>
                        <div><span>当前位置位置:</span>${ _this.address }</div>
                        <div><span>当前经度:</span>${_this.lng}</div>
                        <div><span>当前纬度:</span>${_this.lat}</div>
                       </div>`
                      }) 
                      console.log( _this.windows,' _this.windows _this.windows')
                    } else {
                      _this.address = "未检测到该地址"
                    }
                });
          },
        },
        plugin: ["ToolBar"],
        
      markers: [
          {
            position: [120.60904204845428, 30.001987338249048],
            text: "龙湖大厦",
            offset: [0, 30],
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style>
.addr-info {
  width: 1000px;
  height: 60px;
  margin: 0 auto;
}
</style>

//https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install  中文文档

// https://gitee.com/ssc3369/cesium-test.git