I had been using VUE-AMAP because I needed to use Gaud map for my work.

All of a sudden, party A demanded that the map not show the text of place names, cities and so on, because they thought that would be messy. I can’t. Let’s change it. I think this should be easier. ShowLabel :false can only be set when amap.map is initialized. But in vue-AMAP documentation and looking for a long time, there is no; Vue-amap uses props passed by the el-Amap component as the option for initializing the amap. Map object. The el-Amap component does not set the showLabel prop at all. Solved the case, no more entangle. switch to the original Amap.

1. Introduce the JSAPI

Import the following two JSapis in the template index.html in the project root directory

<script type="text/javascript" src="Https://webapi.amap.com/maps?v=1.4.4&key= you apply for the Key"></script>
<script type="text/javascript" src="/ / webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
Copy the code

2. Statement externals

Because they are imported via the Script tag, the imported libraries should be declared as external extensions in the Webpack, otherwise they won’t be found when imported in the module. For vuE-CLI2, add it directly to the WebPack configuration file in the Build folder. For vue-cli3, create a vue.config.js file in the project root directory, add the following externals configuration, and restart the project to refresh the screen.

Entry: {... },externals: {
   "AMap": "AMap",},Copy the code

3. Initialize the map

Introduce dependencies in components that require maps:

import AMap from 'AMap';
Copy the code

Specify a DOM element to render the map.

const dom = document.getElementById('amapArea');
Copy the code

Initialize the map object.


this.map = new AMap.Map(dom, {
   resizeEnable: true.zoom: 10.center: [116.397428.39.90923].showLabel: false // The map text tag is not displayed. Finally, TAT can be configured
});
Copy the code

Finally configurable, no map text annotation, YES!

This will allow you to do whatever you want with the official amAP documentation instead of having to go through vuE-AMAP.

4. Other functions

Just a couple of examples

4.1 Defining Styles

You can use the official version or customize it in the editor.

this.map.setMapStyle('amap://styles/darkblue');
Copy the code

4.2 add a marker

A marker is a mark on a map. The default is blue upside down water droplets.

let marker = new AMap.Marker({
   position: [118.790606.32.047292],
})
marker.setMap(this.map);
Copy the code

You can also customize content.

     let marker = new AMap.Marker({
        position: [118.790606.32.047292].content: ` 
      
 
       
 
       

         New interface 
       
 
      
 '
      })
      marker.setMap(this.map);
Copy the code