Vue-CLI 3.0 Configuring two ways of Gaode Map

  • 的头像-Tumi
  • 44 day agopublish

There are two ways to use Gaode map in Vue

1. Vue-AMAP component

official website: -AMap / # /

It is intended to use this component to make a map function, but there is some problems after trying, so give up, it may be that my use is wrong. I have encountered:

1. After installation, it is always prompted cross-domain issues.

2. After the page is refreshed, there is no problem when you enter the page for the first time. Because these two problems have abandoned the use of this component. I think it may be that I have a problem with the code.

Second, directly quote Gao De Map SDK

Because the first way is tried, I chose the way to directly reference the SDK. Using this method does not have a problem in the way. Directly quote SDK mode step:

1. Add


2. Configuring Externals
module.exports = {DEVSERVER: {Port: 57103 // port number configuration}, configureWebPack: {externals: {‘Amap’: ‘Amap’ // Gao De Map Configuration}}}

Note: Vue.config. The JS file is created yourself, and the Vue-CLI 3.0 does not automatically generate this file. In addition, modifying Vue.config.js will not trigger heat loadingIt is also the modification you need to re-run your project, it can take effect.
Import AMAP FROM ' Amap '// introduced Gaode Map EXPORT DEFAULT {mounted () {this.init ()}, methods: {init () {let map = new (' container ', {center: [116.397428, 39.90923], ResizeEnable: True, ZOOM: 10})}}}
Note: Init () method Please call in the MOUNTED lifecycle because if it is called at the CREATED phase Will not find the HTML element Div # Container
4. The effect map


It is the two ways of configuring the Golden Map in the Vue-CLI 3.0 introduced to you. I hope that everyone will help you. If you have any questions, please send me a message, Xiaobian will reply to everyone in time! Vue-Cli 3.0 中配置高德地图的两种方式

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment