简体   繁体   中英

“this.update is not a function” following Leaflet JS tutorial

I am copying this tutorial on the Leaflet JS website: https://leafletjs.com/examples/choropleth/

The code for adding control is this:

var info = L.control();

info.onAdd = function(mymap) {
//Create a div with a class of info
      this._div = L.DomUtil.create('div', 'info');
      this.update();
      return this._div;
};

But when I do this, I get the following error:
Uncaught TypeError: this.update is not a function.

Here is how I incorporated that code from the tutorial into my code:

var mymap = L.map('mapid').setView([41.850033, -87.6500523], 3.2);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 15,
            id: 'mapbox.mapbox-streets-v7',
            accessToken: 'pk.eyJ1IjoiYWxsYW5yaW1iYW4iLCJhIjoiZWEyYTc5NDhmZjdmYjQzM2I3MDdkN2I4OTQ3MjQyNWEifQ.U2GPM8lv7x--qHhbjNo5Ug'
        }).addTo(mymap);

        //control that shows county info
        var info = L.control();

        info.onAdd = function (mymap) {
            //Create a div with a class of info
            this._div = L.DomUtil.create('div', 'info');
            this.update();
            return this._div;
        };

        //method that will update the control based on feature properties passed

        info.udpate = function (props) {
            this._div.innerHTML = '<h4>US Election Result</h4>' + (props ? '<b>' + props.NAME + '</b>' : 'Hover over a county');
        };

        info.addTo(mymap);  

You can see my webpage and the error in the source code here: https://sushirittoman.github.io/maps/counties_project/index.html

Please help. Thank you.

I don't even know what it is, but I figured out.
The tutorial page also show the final result , which is using exactly the same code.
And I started debugging, and got it.
You simply misspelt the word...

info.udpate → info.update

For your information.(just in case)
In this case, 'this' means 'info'.
So you just called own function in that part.(the name update is not important.)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM