vue+extra+高德

最新推荐文章于 2024-12-08 23:42:48 发布

是可爱的大福呀~

最新推荐文章于 2024-12-08 23:42:48 发布

阅读量158

点赞数 1

分类专栏： vue 高德 extra

本文链接：https://blog.youkuaiyun.com/henghahouhei/article/details/119823886

版权

vue 同时被 3 个专栏收录

9 篇文章

订阅专栏

高德

2 篇文章

订阅专栏

extra

2 篇文章

订阅专栏

1.在index.html中引入js

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=a193b223b319b7742f1657aff8acbab0&plugin=AMap.Scale&plugin=AMap.PolyEditor&plugin=AMap.MouseTool&plugin=AMap.ControlBar&plugin=AMap.DistrictSearch"></script>

2.调用封装的js

import config from "../config/config"; // 配置项

import {loadModules} from "esri-loader";

class GDMap {

    init($el) {

        loadModules(

            [

                "esri/extras/AMapInitial",

                "esri/extras/AMapGetGrids",

                "esri/extras/AMapInitEditor",

                "dojo/parser"

            ],

            config.loadConfig

        )

            .then(

                ([

                    AMapInitial,

                    AMapGetGrids,

                    AMapInitEditor,

                    Parser

                ]) => {

                    Parser.parse(); // 解析

                    //地图初始化

                    this.ami = new AMapInitial();

                    this.ami.init_2D_map($el);

                    //获取项目区域

                    this.agg = new AMapGetGrids();

                    this.grids = this.agg.get_grids();

                    //生成项目区域，并可编辑

                    this.ame = new AMapInitEditor();

                    this.ame.init_grids_editor(this.grids);

                    this.mapStartEdit = function (type) {

                        this.ame.imit_grids_edit(type);

                    }

                }

            ) //end

            .catch((err) => {

                console.error(err);

            });

    }

}

export default GDMap