Shulou(Shulou.com)06/03 Report--

It is believed that many inexperienced people are at a loss about how to introduce maps into vue.js. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

The method of introducing vue.js into the map: 1, go to the official website of Sky Map to get the key; 2, introduce the corresponding src;3 in the index.html of the vue project, create a new map.js file, and quote it in the vue page.

This article operating environment: windows10 system, vue 2.5.2, thinkpad T480 computer.

In fact, there are many ways to introduce maps into the vue project. For example, we can use the functions of Sky Map and vue-amap lights, each of which has its own advantages. You can choose according to your own needs. Here is the way to map the next day.

The specific method and steps are as follows:

The first step is to get your key (key) according to the official website of Sky Map.

The second step is to introduce the corresponding src into the index.html in your vue project.

The third step is to create a js file Map.js to facilitate the introduction of the map of heaven and earth, which can be placed in a convenient location. The code in Map.js is as follows

/ / initialize the map export default {init () {return new Promise ((resolve, reject) = > {/ / return if (window.T) {console.log ('map script initialized successfully.') Resolve (window.T) reject ('error')}})}}

The fourth step can be referenced in the vue page that you use. The code is as follows

Import MapInit from "@ / components/Map.js" export default {data () {return {map: null,}}, created () {this.init ()}, methods: {init () {MapInit.init () .then (T = > {this.T = T Const imageURL = "http://t0.tianditu.gov.cn/img_c/wmts?tk= your key"; const lay = new T.TileLayer (imageURL, {minZoom: 1, maxZoom: 18}); const config = {layers: [lay], name: 'TMAP_SATELLITE_MAP'}; this.map = new T.Map (' bdmap', config) Const ctrl = new T.Control.MapType (); this.map.addControl (ctrl); this.map.centerAndZoom (new T.LngLat (118.62, 28.75,16) this.map.addEventListener ("zoomend", () = > {console.log (lay.Pe)}) }). Catch () / / listen for zoom level (zoomed level)}} .map {width: 100vw; height: 100%; position: absolute;} after reading the above, have you mastered how to introduce vue.js into the map? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.