vue2集成高德地图

单独的组件

<template>
        <div id="container" style="width: 100%; height: 100%;"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
    name: "gaode",
    props: {
        center: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        return {
            center: this.center,
            map: null,
            address: '',        
        }
    },
    mounted() {
      this.getCenter();
    },
    methods: {
        addMarker(arr) {
            //删除原有标记
            //判断this.marker是否为null
            if(this.marker != null){
              this.map.remove(this.marker);
            }
            // 创建点标记
            this.marker = new AMap.Marker({
              position: arr,
            });
            // 将点标记添加到地图中
            this.map.add(this.marker);
            // 设置地图中心点
            this.map.setCenter(arr);
            //修改zoom 
            this.map.setZoom(16);
    },
      //获取昆山市开发区金纬度
      getCenter(){
      
          let community = {
            address: '昆山市开发区',
          };
  
        this.$http.get('/api/gaode/geocodeAddress', {
          params: {
            address: community.address,
          },
        }).then((res) => {
            // 设置地图中心点
            this.center = [res.data.longitude, res.data.latitude];
            // 创建点标记
            this.initMap();
        })
        .catch(e => {
          console.log(e)
        })
      },
      
      initMap() {
       const that = this;
        // this. $nextTick(() => {
            let centers = this.center;
            console.log(centers)
                AMapLoader.reset();
                AMapLoader.load({
                key: 'Key', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ["AMap.Scale",
                    "AMap.OverView",
                    "AMap.ToolBar",
                    "AMap.MapType",
                    "AMap.Geolocation"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
                .then(AMap => {
                this.map = new AMap.Map('container', {
                    //设置地图容器id
                    // viewMode: '3D', //是否为3D地图模式
                    zoom: 10, //初始化地图级别
                    center: centers //初始化地图中心点位置
                })
                // 添加点击事件监听器
                // this.map.on('click', this.handleMapClick);
                    // 加载Geocoder插件
                AMap.plugin('AMap.Geocoder', () => {
                    // 插件加载完成后，可以在这里继续使用Geocoder
                });
                })
                .catch(e => {
                console.log(e)
                })
            // })

        },
    }
}
</script>
<style lang="scss">

</style>

父组件引入

<gaodeditu :center="center" ref="amapComponentRef" />

通过

that.$refs.amapComponentRef.函数名(参数)去调用子组件方法

例子

在我的上面高德地图的子组件中有一个名为addMarker的函数这个函数是用来给地图新增点位的
我就可以在父组件中通过that.$refs.amapComponentRef.addMarker()方法去调用该方法