• vue 结合element-ui实现pc端高德地图组件


    vue 结合 element-ui 实现 pc 端高德地图组件

    实现的功能有:自动定位,检索地址提示,点击地图获取地址,添加工具栏,拿到的数据有经纬度,地址,名称等

    项目依赖:vue-cli:3.5.3 vue:2.6.10 element-ui: ^2.7.0 等

    使用步骤
    1./public/index.html 文件中导入高德地图 js

    <script
    type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.4&key=<%=VUE_APP_AMAP_KEY%>"
    ></script>
    1
    2
    3
    4
    2.环境变量中配置地图 key 值(也可以直接写在上面,就是不便于维护)

    .env.development 和.env.production 文件中加入

    VUE_APP_AMAP_KEY='' # 你的高德地图key值
    1
    3.地图组件 /components/Amap/index.vue

    <template>
    <div id="amap-container">
    <el-input
    id="search-input"
    v-model="searchValue"
    class="input-with"
    placeholder="请输入地址"
    clearable
    @clear="handelclearInput"
    @keyup.native.enter="handelSearch"
    >
    <el-button
    slot="append"
    size="small"
    type="primary"
    icon="el-icon-search"
    @click="handelSearch"
    >搜索</el-button
    >
    </el-input>

    <div id="searchResultPanel" />
    <el-row class="margin-top-10 address">
    当前地址是: {{ formattedAddress }}
    <el-button size="small" type="primary" @click="handelSave"
    >使用该地址</el-button
    >
    </el-row>

    <div id="custom-amap" />
    </div>
    </template>

    <script>
    const AMap = window.AMap;
    export default {
    name: 'AMap',
    props: {
    defaultValue: {
    type: String,
    default: ''
    }
    },
    data() {
    return {
    defaultCity: '北京',
    // 地图对象
    map: null,
    // 定位默认地址 | 搜索后选择的地址
    formattedAddress: null,
    // 地址对应的经纬度信息
    position: {},
    // 检索关键字
    searchValue: '',
    // 检索函数对象
    placeSearch: null,
    // 检索结果数据数据
    searchInfoList: [],
    // 地图标记
    marker: '',
    // 地址解析(正向)
    geocoder: '',
    // 地址名称
    name: ''
    };
    },
    watch: {
    defaultValue() {
    this.searchValue = this.defaultValue;
    }
    },
    mounted() {
    // 初始化地图页面
    this.initMap();
    },
    beforeDestroy() {
    // 销毁地图
    this.map.destroy();
    },
    methods: {
    // 初始化地图页面
    initMap() {
    this.map = new AMap.Map('custom-amap', {
    resizeEnable: true,
    zoom: 50
    });
    // 添加工具栏
    this.map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'], () => {
    // 工具条
    const toolbar = new AMap.ToolBar();
    // 比例尺
    const scale = new AMap.Scale();
    // 显示鹰眼
    const overView = new AMap.OverView();
    this.map.addControl(toolbar);
    this.map.addControl(scale);
    this.map.addControl(overView);
    });
    // 添加maker
    this.setMaker();
    // 添加鼠标点选地图选择地址
    this.addAmapGeocoder();
    // 添加定位
    this.addAMapGeolocation();
    // 添加检索提示
    this.addAMapAutocompletePlaceSearch();
    },
    // 添加maker
    setMaker() {
    this.marker = new AMap.Marker();
    this.map.add(this.marker);
    // 添加解析地理位置插件
    this.map.plugin('AMap.Geocoder', () => {
    // 异步加载插件
    this.geocoder = new AMap.Geocoder({
    city: this.defaultCity, // 默认:“全国”
    radius: 1000 // 范围,默认:500
    });
    });
    },
    // 添加鼠标点选地图选择地址
    addAmapGeocoder() {
    // 添加maker
    this.setMaker();
    // 地图添加点击事件
    this.map.on('click', e => {
    const lnglat = [e.lnglat.lng, e.lnglat.lat];
    this.marker.setPosition(lnglat);
    this.geocoder.getAddress(lnglat, (status, result) => {
    if (status === 'complete' && result.regeocode) {
    const res = result.regeocode;
    const data = {
    // 地址名称
    adress: res.formattedAddress,
    // 纬度lat
    lat: lnglat[1],
    // 经度lng
    lng: lnglat[0]
    };
    this.formattedAddress = res.formattedAddress;
    this.position = data;
    } else {
    alert(JSON.stringify(result));
    }
    });
    });
    },
    // 添加自动定位
    addAMapGeolocation() {
    this.map.plugin('AMap.Geolocation', () => {
    const geolocation = new AMap.Geolocation({
    // 是否使用高精度定位,默认:true
    enableHighAccuracy: true,
    // 设置定位超时时间,默认:无穷大
    timeout: 10000,
    // 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
    buttonOffset: new AMap.Pixel(200, 200),
    // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
    zoomToAccuracy: true,
    // 定位按钮的排放位置, RB表示右下
    buttonPosition: 'RB'
    });
    // 获取当前位置
    geolocation.getCurrentPosition();
    // 添加定位当前城市成功监听
    AMap.event.addListener(
    geolocation,
    'complete',
    this.onCurrentPositionComplete
    );
    // 添加定位当前城市发生错误监听
    AMap.event.addListener(
    geolocation,
    'error',
    this.onCurrentPositionError
    );
    });
    },
    // 添加检索提示检索
    addAMapAutocompletePlaceSearch() {
    // 自动提示
    this.map.plugin('AMap.Autocomplete', () => {
    const auto = new AMap.Autocomplete({
    city: this.defaultCity,
    input: 'search-input'
    });
    // 添加检索监听
    AMap.event.addListener(auto, 'select', this.onSelectAutocomplete);
    });
    // 检索服务
    AMap.service(['AMap.PlaceSearch'], () => {
    // 构造地点查询类
    this.placeSearch = new AMap.PlaceSearch({
    type: '', // 兴趣点类别
    pageSize: 5, // 单页显示结果条数
    pageIndex: 1, // 页码
    city: this.defaultCity, // 兴趣点城市
    citylimit: false, // 是否强制限制在设置的城市内搜索
    map: this.map, // 展现结果的地图实例
    panel: 'searchResultPanel', // 结果列表将在此容器中进行展示。
    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
    });
    });
    // 添加检索监听
    AMap.event.addListener(
    this.placeSearch,
    'listElementClick',
    this.onSelectSearch
    );
    },
    // 定位当前城市成功回调
    onCurrentPositionComplete(res) {
    // 添加maker
    this.setMaker();
    const lnglat = [res.position.lng, res.position.lat];
    this.marker.setPosition(lnglat);
    console.log(res, 'res');
    this.formattedAddress = res.formattedAddress;
    this.position = res.position;
    },
    // 定位当前城市发生错误回调
    onCurrentPositionError(err) {
    console.log(err);
    },
    // 按钮触发检索
    handelSearch() {
    this.placeSearch.search(this.searchValue, (status, info) => {
    this.searchInfoList = info.poiList.pois;
    });
    },
    // 选择自动提示数据事件回调
    onSelectAutocomplete(e) {
    this.searchValue = e.poi.name;
    this.handelSearch();
    },
    // 选择检索数据结果事件回调
    onSelectSearch(e) {
    const res = e.data;
    this.formattedAddress = res.cityname + res.adname + res.address;
    this.name = res.name;
    this.position = res.location;
    },
    // 清除input里的值,清除搜索结果,再次初始化map
    handelclearInput() {
    document.querySelector('#searchResultPanel').innerHTML = '';
    },
    // 保存当前选择的地址,分发事件
    handelSave() {
    this.searchValue = this.formattedAddress;
    const { lat, lng } = this.position;
    const data = {
    name: this.name,
    // 地址名称
    address: this.formattedAddress,
    // 纬度lat
    lat,
    // 经度lng
    lng
    };
    this.$emit('getPosition', data);
    }
    }
    };
    </script>

    <style lang="scss">
    #amap-container {
    .el-input__clear {
    line-height: 34px;
    // top: 20px;
    }
    #custom-amap {
    height: 60vh;
    100%;
    margin-top: 10px;
    border: 1px solid #ccc;
    }
    .input-with {
    // position: fixed;
    // top: 40px;
    z-index: 1;
    580px;
    }
    .address {
    color: #373737;
    }
    }
    .amap-sug-result {
    z-index: 99999;
    }
    </style>

    4.使用

    <template>
    <amap :default-value="postForm.detailedAddress" @getPosition="getPosition" />
    </template>
    <script>
    import Amap from '@/components/Amap'
    export default {
    components: {
    Amap
    },
    data: {
    postForm: {
    detailedAddress: '',
    longitude: '',
    latitude: ''
    }
    },
    methods: {
    // 获取地址信息
    getPosition({ address, lat, lng, name }) {
    this.postForm.detailedAddress = address;
    this.postForm.longitude = String(lng);
    this.postForm.latitude = String(lat);
    }
    }
    };
    </script>

    原文链接:https://blog.csdn.net/qq_39953537/java/article/details/97105938

  • 相关阅读:
    杭电ACM1.1.4
    杭电ACM1.2.1 Elevator
    杭电ACM1.2.3 QuickSum
    杭电ACM1.2.5 Balloon Comes!
    ProxySQL 读写分离实践
    MySQL 5.7 新特性之初始化
    MySQL高可用架构之MHA 原理与实践
    CentOS 7 快速初始化脚本 for MySQL
    基于Mysql 5.7 GTID 搭建双主Keepalived 高可用
    MySQL 5.7 新特性之增强半同步复制
  • 原文地址:https://www.cnblogs.com/tzwbk/p/12689409.html
Copyright © 2020-2023  润新知