Use vue-amap in antd pro, achieve maps and coordinates.
1, the installation
npm install vue-amap --save
2, is introduced in the main, js
VueAMap import from ' vue-amap ' ; Vue.use (VueAMap); VueAMapinitAMapApiLoader ({ key: ', YOURKEY ', , plugin for: [ ', AMapAutocomplete', , ', AMapPlaceSearch', , ', AMapScale', , ', AMapOverView', , ', AMapToolBar', , ', AMapMapType', , ', AMapPolyEditor', , ', AMapCircleEditor', ], to v: ', 1.4.4 ', });
3. In the vue, template
<template> <div id="app"> <div class="amap-wrapper"> <el-amap ref="map" :vid="'amapDemo'" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo" > <el-amap-marker v-for="u in markers" :position="u.position"></el-amap-marker> <el-amap-marker :position="[121.5273285, 31.21515044]" :icon="icon"></el-amap-marker> </el-amap> </div> </div> </template>
script
<script> export default { data() { return { center: [121.5273285, 31.21515044], zoom: 12, position: [121.5273285, 31.21515044], icon: '/huoche.png', events: { init(o){ console.log(o.getCenter()); }, zoomchange: (e) => { console.log(e); }, zoomend: (e) => {
// Get the current value of the zoom scaling the console.log ( the this ; $$ $ refs.map the getInstance () getZoom ()...) The console.log (E); }, the Click: E => { Alert ( ' Map clicked ' ) } }, markers: [ { position: [ 121.5273285 , 31.41515044 ] }, { position: [ 121.5273286 , 31.31515045 ] } ],
// other components plugin: [ { pName:'Scale', events: { init(instance) { console.log(instance) } } }, { pName: 'ToolBar', events: { init(instance) { console.log(instance) } } } ] } }, } </script>