javascript - Vuejs Leaflet : Map Container Not Found - Stack Overflow

admin管理员组

文章数量:1289623

I am trying to use the leaflet map in Vue, but keep getting the error:

Uncaught Error: Map container not found.

This is what my ponent looks like:

<template>
  <div id="app" class="container">
    Map
    <div class="col-md-9">
      <div id="mapid"></div>
    </div>
  </div>
</template>

<style scoped>
#mapid { 
    height: 800px;
}
</style>

<script>
import L from 'leaflet'

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('/{id}/{z}/{x}/{y}.png?access_token={}', {
    attribution: 'Map data &copy; <a href="/">OpenStreetMap</a> contributors, <a href=".0/">CC-BY-SA</a>, Imagery © <a href="/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: ''
}).addTo(mymap);
</script>

I have also added the Leaflet CSS and JavaScript under that in my index.html head.

I am trying to use the leaflet map in Vue, but keep getting the error:

Uncaught Error: Map container not found.

This is what my ponent looks like:

<template>
  <div id="app" class="container">
    Map
    <div class="col-md-9">
      <div id="mapid"></div>
    </div>
  </div>
</template>

<style scoped>
#mapid { 
    height: 800px;
}
</style>

<script>
import L from 'leaflet'

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

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

I have also added the Leaflet CSS and JavaScript under that in my index.html head.

• javascript
• vue.js
• leaflet

Share Improve this question Follow edited Aug 28, 2018 at 5:11 ghybs 53.4k66 gold badges8686 silver badges114114 bronze badges asked Aug 27, 2018 at 22:05 KevinKevin 36033 silver badges1313 bronze badges 2

• 1 quick fix: put the codes (which creates leaflet map) into the hook=mounted(), check this Vue Guide: life cycle hook, because Vue – Sphinx Commented Aug 27, 2018 at 22:08
• attempted but still have the same error. – Kevin Commented Aug 28, 2018 at 2:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Wele to SO!

When you try instantiating your Leaflet Map by passing it your Element id (L.map('mapid')), the problem is that your Vue ponent is not yet attached to your page DOM. Therefore when Leaflet tries to query the latter to find your Element, it cannot find it, hence your error message.

Same thing if you try instantiating in the mounted lifecycle hook: your Vue ponent instance is created and its fragment HTML structure is built, but still not attached to the page DOM.

But instead of passing your Element id, you can directly pass your Element. Note that you still need to do so in the mounted hook, to ensure that your ponent instance does have an HTML structure built.

L.map(<HTMLElement> el, <Map options> options?)

Instantiates a map object given an instance of a <div> HTML element and optionally an object literal with Map options.

Then to get your Element, simply leverage Vue $refs instance property and ref special attribute, as described in Vue Guide > Accessing Child Component Instances & Child Elements:

[…] sometimes you might still need to directly access a child ponent in JavaScript. To achieve this you can assign a reference ID to the child ponent using the ref attribute.

Therefore in your case you would have in your template:

<div id="mapid" ref="mapElement"></div>

And in your ponent script:

import L from 'leaflet'

export default {
  mounted() {
    var mymap = L.map(this.$refs['mapElement']).setView([51.505, -0.09], 13);
    // etc.
  },
}

The added advantage of using Vue ref over HTML id is that you can have several Vue ponent instances with their own map, and Vue will reference the appropriate Element to each script.

Whereas with HTML id, if you have several map Elements with same id, Leaflet will get only the first one every time you try to instantiate your map, raising the error that the map is already initialized for this container.

本文标签： javascriptVuejs LeafletMap Container Not FoundStack Overflow