Repost the original link
Official document reference: aMap official document
1. Install amp
npm install vue-amap --save
2. Introduce amap into main.js
import AMap from 'vue-amap'//Introduce Gaode map and initialize it
Vue.use(AMap)
AMap.initAMapApiLoader({<!-- --><!-- -->
//It is best not to send the collection secret key directly, please pay special attention to it.
key:'9dda7871b127d833afdc75274e12ae44',
//Plug-in collection
plugin:[
"AMap.Autocomplete", //Input prompt plug-in
"AMap.PlaceSearch", //POI search plug-in
"AMap.Scale", //Thumbnail plug-in scale in the lower right corner
"AMap.OverView", //Map Eagle Eye plug-in
"AMap.ToolBar", //Map toolbar
"AMap.MapType", //Category switching control to realize switching control between default layer, satellite image and traffic layer
"AMap.PolyEditor", //Edit multiple polylines and polygons
"AMap.CircleEditor", //circle editor plug-in
"AMap.Geolocation" //Location control, used to obtain and display the latitude and longitude of the user's host
],
v: '1.4.4',
})
3. Use it in components that need to introduce amap, where el-amap-marker is for coordinate identification and el-amap-info-window is for the implementation of information forms.
<div class="aMap-wrapper">
<el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
<el-amap-marker
v-for="marker in markers"
:position="marker.position"
:key="marker.id"
:events="marker.events"
:icon="marker.icon"
></el-amap-marker>
<el-amap-info-window
v-if="window"
:position="window.position"
:visible="window.visible"
:content="window.content"
:offset="window.offset"
></el-amap-info-window>
</el-amap>
</div>
4. Initialize data in data area
data() {<!-- --><!-- -->
return {<!-- --><!-- -->
center: [121.126757,31.140653],
zoom:12,
mapStyle: "amap://styles/blue", //Modify the background color of the map
markers: [],
windows:[],
window:'',
}
},
5. Introduce customized coordinate icons according to needs
import location from '../../../assets/img/[email protected]'
6. The methods method defines the pointMarker data. What I write here is static data. Subsequent related data can be obtained through the interface
methods:{<!-- --><!-- -->
point(){<!-- --><!-- -->
//Customize map point coordinate icon
let icon = new AMap.Icon({<!-- --><!-- -->
image: location,
size: new AMap.Size(2, 2),
imageSize: new AMap.Size(2, 2)
});
let markers = [];
let windows=[];
let that=this;
let pointMarker=[
{<!-- --><!-- -->
lng:120.978008,
lat:31.083667,
stationName: "Qingpu Hydrological Station 1",
buildTime:'2011-12-08',//Website building time
stationAddress:'100m east of Niutoushan Road, Shanghai',//station address
temperature:'25.5℃',//temperature
rainfall:'5mm',//rainfall amount
windDirection:'Northwest',//wind direction
windSpend:'2.05m/s',//wind speed
waterLevel:'2.65m',//water level
waterVelocity:'1.2m/s',//Flow velocity
waterTraffic:'2.8m3/s',//flow rate
},{<!-- --><!-- -->
lng:121.037746,
lat:31.105422,
stationName: "Qingpu Hydrological Station 2",
buildTime:'2011-12-08',//Website building time
stationAddress:'100m east of Niutoushan Road, Shanghai',//station address
temperature:'25.5℃',//temperature
rainfall:'5mm',//rainfall amount
windDirection:'Northwest',//wind direction
windSpend:'2.05m/s',//wind speed
waterLevel:'2.65m',//water level
waterVelocity:'1.2m/s',//Flow velocity
waterTraffic:'2.8m3/s',//flow rate
}
]
pointMarker.forEach((item,index)=>{<!-- --><!-- -->
markers.push({<!-- --><!-- -->
position: [item.lng,item.lat],
icon:location, //Do not set the default blue water droplet
events: {<!-- --><!-- -->
click() {<!-- --><!-- -->
that.windows.forEach(window => {<!-- --><!-- -->
window.visible = false; //Close the form
});
that.window = that.windows[index];
that.$nextTick(() => {<!-- --><!-- -->
that.window.visible = true;//Click the point coordinates and an information form will appear.
});
}
}
})
windows.push({<!-- --><!-- -->
position: [item.lng,item.lat],
content:"" +
"<div>" + "Site name:" + item.stationName + "</div>" +
"<div>" + "Website building time:" + item.buildTime + "</div>" +
"<div>" + "Address:" + item.stationAddress + "</div>" +
"<div>" + "Temperature:" + "<span style='color: #66A0FF'>" + item.temperature + "</span>" + "</div>" +
"<div>" + "Rainfall:" + "<span style='color: #66A0FF'>" + item.rainfall + "</span>" + "</div>" +
"<div>" + "Wind direction:" + "<span style='color: #66A0FF'>" + item.windDirection + "</span>" + "</div>" +
"<div>" + "Wind speed:" + "<span style='color: #66A0FF'>" + item.windSpend + "</span>" + "</div>" +
"<div>" + "Water level:" + "<span style='color: #66A0FF'>" + item.waterLevel + "</span>" + "</div>" +
"<div>" + "Flow velocity:" + "<span style='color: #66A0FF'>" + item.waterVelocity + "</span>" + "</div>" +
"<div>" + "Traffic:" + "<span style='color: #66A0FF'>" + item.waterTraffic + "</span>" + "</div>"
,
offset:[5,-15],//Form offset
visible: false//Whether to display initially
})
})
//Add point label
this.markers = markers;
//Generate pop-up window
this.windows=windows
},
},
7. The mounted method area calls the above point() method:
mounted(){<!-- --><!-- -->
this.point()
}
Rendering:
