Vue Gaode map RBI

There are two ways to manage vu Gaode map

Preface: Regardless of the method, first of all, you must first go to the Gaode open platform to apply for your own key.

Official website link: Amap Open Platform | Amap API (amap.com)

Go in and register first, after registration, enter the console => application management => my application, create an application, and then you will have your own key

Method 1: add in index.html

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key={}"></script>

Fill in the key you just applied for in {}

Method 2: add in main.js

1. Introducing APIs

npm i @amap/amap-jsapi-loader --save

2. Global reference in main.js

// 引入高德地图
import VueAMap from 'vue-amap';

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: '96d2f9d719adcb8301878f917115ea42',
  // 插件集合
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 高德 sdk 版本，默认为 1.4.4
  v: '2.0'
});

The above are two different ways of referencing, referring to your own project, which will be shown below

Create a new div, there are two points to note:

1. This div must specify the width and height, otherwise the map will not come out

2. The map needs to be loaded asynchronously

<div id="map"></div>

mounted() {
    this.openDialog()
  },
methods: {
    // 打开弹窗，name为弹窗名称
    async openDialog() {
      this.initMap();
    },
    initMap() {
      //指定地图中心点坐标，经纬度，是个数组
      let centerPoint = []
      const _this = this
      this.$nextTick(() => {
        this.marker,this.map = new AMap.Map("map", {
          resizeEnable: true,
          center: centerPoint,
          zoom: 15
        });
        AMap.plugin([
          'AMap.ToolBar',
        ], function(){
          // 在图面添加工具条控件, 工具条控件只有缩放功能
          _this.map.addControl(new AMap.ToolBar());
        });
      });
    },
}

<style scoped>
#map {
  width: 100%;
  height: 400px;
  border: 1px solid gray;
  box-sizing: border-box;
  overflow: hidden;
}
</style>

achieve RBI

First render a click event to the map when loading the map

this.map.on('click', this.showInfoClick);

add event

showInfoClick(e){
      this.marker = new AMap.Marker({
        icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: [e.lnglat.getLng(), e.lnglat.getLat()],
        offset: new AMap.Pixel(-13, -30)
      });
      this.marker.setMap(this.map);
    },

For more map operations, please refer to the asynchronous official document: Overview - Map JS API v2.0 | Gaode Map API (amap.com)

Guess you like