如何在前端展现高德地图（定位，搜索框，等功能）

        第一步：

        你得要在高德地图开发者社区申请一个秘钥（包括key以及安全秘钥）为下面开发做准备：

                我的应用 | 高德控制台高德开放平台官网控制台提供了高德开发者Key管理，Key可视化分析等功能。https://console.amap.com/dev/key/app        第二步：

        写代码：

        ①在main.js文件中引入amap，秘钥，安全密钥以及所需要的包文件：

        import AMap from 'vue-amap';

        window._AMapSecurityConfig = {securityJsCode:'af38748ce1f62fbd663586a4a790528b',}Vue.use(AMap);// 初始化vue-amapAMap.initAMapApiLoader({// 高德keykey: 'c808b6f78842725debf439da734393c0',// 插件集合 （插件按需引入）plugin: [ 'AMap.Autocomplete','AMap.Geolocation', 'AMap.Geocode',         'AMap.ToolBar', 'AMap.PlaceSearch'],v: '1.4.4'});

             ②  在vue展示界面 写入组件  

{{ this.input }} 位置 

import{ AMapManager }from"vue-amap";
let amapManager =new AMapManager();
let Geocoder = null;

③，在初始化变量中写入

//初始化定位
searchOption:{city:"合肥",citylimit:false,
},
center:[120.19,30.26],

// 显示搜索条件
showSearch: true,
name: undefined,
plugin: [{pName: 'Geocoder',events:{init(o) {Geocoder=o// o 是高德地图定位插件实例o.getAddress(self.center, function (status, result) {if (status === "complete" && result.info === "OK") {//result.regeocode.formattedAddress就是具体位置self.input = result.regeocode.formattedAddress;//对搜索组件的input进行赋值self.$refs.searchBox.keyword = self.input;}});},},},{showMarker: true, //定位成功后在定位到的位置显示点标记，默认：truepName: "Geolocation", // AMap-Geolocation 定位插件events: {init(o) {//getCurrentPosition 获取当前位置的方法//注意 虽然进页面就会调用这个方法，但是data()中center要有默认值，不然会报错o.getCurrentPosition((status, result) => {if (result && result.position) {let lng = result.position.lng;let lat = result.position.lat;self.center = [lng, lat];self.loaded = true;self.zoom = 14;self.$nextTick();}});},},},
],
events:{click:(e)=> {self.center = [e.lnglat.lng, e.lnglat.lat];self.BusinessForm.center = self.centerGeocoder.getAddress(self.center, function (status, result) { //根据坐标获取位置if (status === "complete" && result.info === "OK") {self.$refs.searchBox.keyword = self.input;}});}
},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！