（可直接复制使用）vue2+高德地图poi搜索和高德组件，可以地图选点，经纬度，比例尺，卫星图，路网，路况等等

效果图（踩了好多坑，跟着b站一个up主写的）

1.注册高德开发者平台的应用

���册个人开发者以后进入控制台（按下面顺序进行）

 

2.引入

 （1）首先安装高德地图的依赖洒

npm i @amap/amap-jsapi-loader --save 

 （2）复制代码

                                    确定选址                                import AMapLoader from '@amap/amap-jsapi-loader'    window._AMapSecurityConfig = {        securityJsCode: '安全密钥'//在这里填写你的安全密钥    }    export default {        data() {            return {                map: null,                autoOptions: {                    input: 'tishikuang' //绑定的搜索关键字的input标签ID，用这个注册                },                auto: null,                userInput: '', //绑定的搜索关键字的的内容                placeSearch: null,                searchHere: null, //根据搜索组件搜索到以后的地点信息            }        },        mounted() {            this.initMap()        },        methods: {            // poi搜索以后 点击确认选址以后的操作            biu() {                if (this.searchHere) {                    this.$message({                        message: '确认地点：'+this.searchHere.name,                        type: 'success'                    });                    // this.$emit('mapHere',this.searchHere);                                        alert(`地址数据都在data里面this.searchHere，包括经纬度，以及其他各种地址信息，该有的都有，当poi搜索以后select(e){}方法里面的参数e就是地址信息，我把单独拿出来。地点名：`+this.searchHere.name)                }            },            initMap() {                AMapLoader.load({                    key: "填写你的key值", // 申请好的Web端开发者Key，首次调用 load 时必填                    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15                    plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType',                        'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'                    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等                }).then((AMap) => {                    this.map = new AMap.Map("container", { //设置地图容器id                        viewMode: "3D", //是否为3D地图模式                        zoom: 17, //初始化地图级别                        center: [105.602725, 37.076636], //初始化地图中心点位置                    });                    //引入高德地图的空间绑定使用                    this.map.addControl(new AMap.Scale())                    this.map.addControl(new AMap.ToolBar())                    this.map.addControl(new AMap.HawkEye())                    this.map.addControl(new AMap.MapType())                    this.map.addControl(new AMap.Geolocation())                    this.auto = new AMap.AutoComplete(this.autoOptions)                    //                    this.placeSearch = new AMap.PlaceSearch({                        map: this.map                    }) //构造地点查询类                    this.auto.on('select', this.select)//绑定查询事件                }).catch(e => {                    console.log(e);                })            },            //poi搜索 这里面的这个参数 e 就是搜索以后的地址信息 你可以把它打印出来看一看经纬度什么的都有            select(e) {                this.placeSearch.setCity(e.poi.adcode) //依据城市ID搜索                this.placeSearch.search(e.poi.name) //关键字查询查询                this.map.setZoom(10,true)                this.searchHere = e.poi                this.$message({                    message: '选择地点:' + this.searchHere.name,                    type: 'success'                });            }        },    }    #container {        padding: 0px;        margin: 0px;        width: 100%;        height: 500px;    }    .mapSearch {        display: flex;        margin-bottom: 8px;        .el-button {            margin-left: 8px;        }    }    #tishikuang {        margin-bottom: 200px;        display: block;    }

（3）在代码中填写你高德开发者的安全密钥和key值，已经在要填写的地方做了标注

看代码注释就可以找到

算了还是给你写上吧

 

 ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

可以直接复制使用的能不能点个赞再走啊呜呜呜

还有最重要一点 我途中搜索组件的样式是基于element-ui为了防止有的人不会使用element-ui我把关于element-ui的删除了，自己调样式就行

如果你会element-ui那么真正的搜索组件样式是这样的

                                    确定选址