vue使用高德地图组件

    xiaoxiao2023-11-19  138

    安装

    npm install vue-amap

    引入使用和配置(记得先去申请一个高德地图的账号)

    import VueAMap from 'vue-amap' Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: '3b576d3486dc84adc303919ebc399dba', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch','AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation','AMap.Geocoder', 'AMap.AMapManager', 'AMap.Marker'], v: '1.4.4' });

    组件中使用

    <div class="amap-page-container"> <el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo"> <el-amap-ground-image v-for="groundimage in groundimages" :url="groundimage.url" :bounds="groundimage.bounds" :events="groundimage.events"></el-amap-ground-image> </el-amap> </div> <script> import { AMapManager } from 'vue-amap'; export default { data () { return{ zoom: 7, center: [121.5273285, 31.21515044], groundimages: [ { url: '//faas.elemecdn.com/desktop/media/img/appqc.95e532.png', bounds: [[121.5273285, 31.21515044], [122.9273285, 3.31515044]], events: { click() { alert('click groundimage'); } } } ] } }, </script>

     图中的二维码是设置的图标(随便找了张图)

    最新回复(0)