使用高德地图 vue-amap 中遇到的问题

1) 搜索组件进行搜索的时候,无论搜索哪个城市,地图一直固定在一个城市(我的是深圳)

<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult">
</el-amap-search-box>
// 配置
searchOption: {
  city: '深圳',
  citylimit: true
},

找了半天问题 , 发现应该city值为全国的时候,就可以在输入不同城市的时候地图转换为不同的城市

searchOption: {
  city: '全国',
  citylimit: true
},

2) 点击地图显示相应的地址

events:{
    click: (e,f) => {
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });  
        _this.initData.longitude = e.lnglat.lng; // 经度
        _this.initData.latitude = e.lnglat.lat; // 纬度
        _this.center = [ e.lnglat.lng, e.lnglat.lat]; // 地图切换到该位置
        _this.circleList[0].center = [ e.lnglat.lng, e.lnglat.lat]; // 地图切换到该位置
        geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                   if (result && result.regeocode) {
                        _this.initData.province = result.regeocode.addressComponent.province; // 省
                        _this.initData.city = result.regeocode.addressComponent.city; // 市
                        _this.initData.county = result.regeocode.addressComponent.district; // 区 / 镇
                        _this.initData.address = result.regeocode.formattedAddress; // 具体地址
                        _this.$nextTick();
                    }
             }
        }); 
    }
},

3) 根据选择的 省 市 区 进行地图的联动显示
这里写图片描述
类似该地图下部左侧部分 省 选择 北京市 则地图应该相应的切换到北京市 类似这样的功能

/*
    @ function : 根据输入的地址获取经纬度 进行地图的联动显示
    @ param : data 选择的地址  深圳市宝安区
*/
changeLocation(data){
    var _this = this;
    var geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: "all"
    });  
    geocoder.getLocation(data,function(status, result){
        if (status === 'complete' && result.info === 'OK') {
            if (result && result.geocodes) {
                _this.center = [result.geocodes[0].location.lng,result.geocodes[0].location.lat]; 
                _this.circleList[0].center = [result.geocodes[0].location.lng, result.geocodes[0].location.lat];
            }
        }
    });
}
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue使用高德SDK可以通过vue-amap插件来实现。以下是一些基本步骤: 1. 首先,通过npm或yarn安装vue-amap插件。可以使用以下命令进行安装: ```bash npm install vue-amap ``` 2. 在main.js文件引入vue-amap插件: ```javascript import VueAMap from 'vue-amap'; Vue.use(VueAMap); ``` 3. 在Vue组件使用vue-amap插件。可以在组件的mounted钩子函数进行初始化和配置。 ```javascript mounted() { // 初始化vue-amap this.initAMapAPI(); }, methods: { initAMapAPI() { // 配置vue-amap VueAMap.initAMapApiLoader({ key: 'your-amap-api-key', plugin: ['AMap.Geolocation'] }); // 加载插件模块 VueAMap .then(() => { // 创建地图对象 const map = new VueAMap.Map('map-container'); // 添加地图控件等操作 // ... // 获取当前位置 this.getCurrentLocation(map); }) .catch(error => { console.log('地图加载失败:', error); }); }, getCurrentLocation(map) { // 使用高德SDK的定位功能获取当前位置 AMap.plugin('AMap.Geolocation', () => { const geolocation = new VueAMap.Geolocation(); map.addControl(geolocation); geolocation.getCurrentPosition((status, result) => { if (status === 'complete') { // 获取到当前位置信息 console.log('当前位置:', result); } else { // 获取失败 console.log('获取位置失败'); } }); }); } } ``` 通过以上步骤,你就可以在Vue使用高德SDK了。需要注意的是,在使用过程要替换'your-amap-api-key'为你自己的高德API密钥。并且根据需求,你还可以添加更多高德SDK的功能和组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值