How to call internal functions externally?

clipboard.png

methods: {
      move(){

      },
      renderMap() {
        var self = this;
          var map = new AMap.Map("container", {
            zoom: 16,
            scrollWheel: false,
          });
          
        map.panTo([111.672046,40.821607])

        AMapUI.loadUI(["misc/PositionPicker"], function (PositionPicker) {
          if (self.point.length != 0) {
            map.center = self.point;
          }
          var positionPicker = new PositionPicker({
            mode: "dragMap", //Marker
            map: map,//xy
            iconStyle: {
              //
              url: require("../../../assets/images/@3x.png"), //
              size: [22, 32], //
              ancher: [24, 40] //size
            }
          });
          positionPicker.on("success", function (positionResult) {
            var location = {
              address: positionResult.address,
              point: [positionResult.position.lat, positionResult.position.lng]
            };
            self.address = location.address;
            self.point=location.point;
            self.$emit("location", location);
          });
          positionPicker.start();
          map.panBy(0, 1);
          if(self.po.point!==undefined){
            var marker = new AMap.Marker({
              position:[self.po.point[1],self.po.point[0]]
            });
            map.add(marker);//
          }
        });
      }
    }

vue2, wants to call the map.panTo method in renderMap () in the move method.

but I don"t know how to call it. I"ve tried a lot of methods, but I can"t use map.panto if I put it outside renderMap.

uses Amap"s API, but doesn"t know how to call his method outside.
Amap translate api

for a big solution, thank you very much.

May.24,2021

you can expose the method you want to use in the renderMap method, as in the following example

<script>
export default {
    data(){
        return {
            c: ''
        }
    },
    methods: {
        a(){
            this.c()
        },
        b(){
            function c(){
                console.log('')
            }
            this.c = c
        }
    },
    mounted(){
        this.b()
        this.a()
    }
}
</script>

data(){
    return{
        map:null
    }
},
methods: {
      move(){
          this.map.panTo([111.672046,40.821607])
      },
      renderMap() {
          this.map = new AMap.Map("container", {
            zoom: 16,
            scrollWheel: false,
          });
          
          this.map.panTo([111.672046,40.821607])

          ....
      }
}

after thinking about it, this is not appropriate, because the map change will be re-rendered. Consider the downstairs method and put it directly outside the scope of vm .


, I happen to have done this, which is a matter of scope.
defines the map object in the data
or
puts the definition in the outer layer, and then in the method instance Amap gives the object
clipboard.png
or
hangs the object on the window object. window.map = new AMap.Map ()


use a variable in data to save the method you need to call. Or return this method


nothing that cannot be solved with window.x

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3e13c-2c3da.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3e13c-2c3da.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?