demand

  • It’s on the mapInfoWindowAdd 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