demand
- It’s on the map
InfoWindow
Add click events.
Look at most of the web is to regenerate a component, vue instance, link, feel too troublesome. I’m going to write one in native.
Render Marker and InfoWindow
loadMarker(){
/ / simulation marker
const markerList = [
{
name: 'A'.pos: [121.902055.30.861752] {},name: 'B'.pos: [121.340282.31.190927]]},// Generate the infoWindow object, which is named in data
this.infoWindow = new this.AMap.InfoWindow({
offset: new AMap.Pixel(0, -30})),// Define the icon of a marker
const icon = new AMap.Icon({
// Icon size
size: new AMap.Size(64.64),
// The address of the icon
image: require('src/assets/marker.png'),
// The size of the image used by the icon
imageSize: new AMap.Size(32.32),
// The icon takes the graph offset
imageOffset: new AMap.Pixel(0.0)})// Iterate over markerList to render marker
markerList.forEach((i) = >{
let marker = new AMap.Marker({
position: i.pos,
id: i.name,// Write the required parameters
icon: icon,// Here is the map icon, need to configure their own
zIndex: 100
});
// Construct the content displayed by click marker - bind each click object, note the class name 'detailBtn'
const markerContent = '<div class=" p-market-info "> <div class="info-item"> <label> Inventory name :</label> <span>${i.name}</span>
<div class="info-item">
<label class="detailBtn" comId=`+company.id+'> View details ';
})
marker.infoWindow = markerContent// Bind infoWindow to marker
// Bind the click event to InfoWindow at click time, since the DOM of InfoWindow is generated only after the click
marker.on('click'.(e) = > {
this.mapEleClick(marker)
})
}
Copy the code
Bind the infoWIndow click
// Marker click events
mapEleClick (marker) {
// Click display popup
this.infoWindow.setContent(marker.infoWindow);
this.infoWindow.open(this.map, marker.getPosition())
// Bind the InfoWindow click event, give a timer, make sure infoWindwo is available and bind
setTimeout(_= >{
this.bindWindowClick()
},500)},bindWindowClick() {
/ * * * * * * * * * * * * * * * * * * * * * * infoWindow the click event of * * * * * * * * * * * * * * * * * * * * * * * /
// Because the infoWindow is generated only after Marker is clicked, the binding is done
// Native javascript methods go
const windowDomList = document.querySelectorAll('.detailBtn')
windowDomList.forEach(i= >{
i.onclick = (e) = >{
const id =e.target.getAttribute('comId')
// Do the click operation here}})}Copy the code
conclusion
- Give each infoWindow a class name and bind the event
- The Map of Autonavi infoWindow will not be rendered immediately, it will only be generated when marker is clicked
- So you need to generate infoWindow before you can bind events