This is the second day of my participation in Gwen Challenge.

Sometimes in the project will encounter the need to display Amap in the page, and related development, the following is introduced in the process of using AmAP encountered some problems, and usage (basic use case documentation is written).

Vue-amap library can be used in VUE or the native AMAP API, vuE-AMAP is more user-friendly to use

 <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
 </el-amap>
Copy the code

Autonavi provides custom map styles. We only need to change the map style in the project. ‘amap://styles/ map style ID’. This is why there is no change after changing the map style ID. The applied app key belongs to the same account as the map style key.

The introduction of

Vue uses the native Amap API, We just need to add 

    var map = new AMap.Map("container", {
        resizeEnable: false.center:[xx,xx] ,
        zoom: 15
    });
Copy the code

We can see the Gaud map.If you want to use custom AMapUI components, you need to add< script SRC = "/ / webapi.amap.com/ui/1.1/main.js" > < / script >Remember to import the map first and then the UI component, otherwise undefined will appear.

For the requirements of some custom points in the map, there are relevant instructions in the document. For example, the warning of water ripples can be realized by changing the radius regularly through Circle, but it is not visually friendly. Use the process or need to query the document, and then to achieve the relevant UI effect, if just a simple use of the official list has been enough, the main is to meet some technical needs.