Gaode map series (1): How to use Gaode map in vue project, getting started and using basic controls

Table of contents

Chapter 1 Preface

Chapter 2 Preparation

2.1 Account registration

2.2 Amap Development Platform Documentation

2.3 Create application

Chapter 3 Using Maps

3.1 Steps to use the map

3.2 Understand several basic map controls

3.3 Understanding basic classes

Chapter 1 Preface

The editor uses Amap in the Vue project. Every function will be tested personally before leaving notes. I will also use popular language so that everyone who sees the editor's notes can also use Amap proficiently. If you have different understandings of its use in the project, you are welcome to leave a message in the comments.

Chapter 2 Preparation

2.1 Account registration

2.2 Amap Development Platform Documentation

Amap Open Platform | Amap Map API

Documentation and Support -> Select JS API

After clicking to enter, there is the API interface document of Amap 2.0:

Overview-Map JS API 2.0 | Amap Map API

This is the API interface document of Amap 1.x: (The editor recommends comparing the two documents)

Overview-Map JS API | Amap Map API

But we are still using the latest Gaode map, so we need to pay attention to the following points: ( The editor encountered during use, of course, if you want other Welcome to leave a message in the comment area, and the editor will also add it, so that everyone can improve each other!!)

security key
Positioning local projects to the current location only works on IE

2.3 Create application

Console -> My Apps -> Create New App

Click to create a new application (select according to your needs)

Created successfully

Add key

- Please explain, don’t be frightened by the new filling method. This filling content is for the app Android side of the uniapp project. As for how to obtain the above name, the editor also has his own complete uniapp development process, as follows:

App software development, use of uniapp, uni-admin, independent app development, and integration of related technologies (very complete, a set of uniapp related technologies that the editor has practiced)_❆VE❆'s blog-CSDN blog

--Explanation: Different platforms have different ways of obtaining keys.

Take web service as an example (JS API)

- Just fill in the information and submit it

Created successfully

Notice

Chapter 3 Using Maps

(The official documents are basically all about js usage. The usage is similar, but there are still differences. In order for everyone to get started directly, I put it into practice in the project)

Tutorial reference

Using JS API with Vue-Basics-Advanced Tutorial-Map JS API 2.0 | Amap Map API

3.1 Steps to use the map

1. Introduction method, use npm method to install and use loader

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

2. Create a map component

3. Create a map container and create a < div> tag in the map component as the map container.

<template>
  <div>
    <div id="container" ref="amap"></div>
  </div>
</template>

4. Set the map container style

<style lang='less' scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 900px;
}
</style>

5. Introduce JS API Loader

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
</script>

6. Map initialization

methods:{
initAMap() {
  const _this = this
  AMapLoader.load({
    key: '365c***********155b', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: []  // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加
  })
    .then((AMap) => {
      const map = new AMap.Map('container', {
        // 设置地图容器id
        viewMode: '3D', // 默认2d地图模式
        zoom: 12, // 初始化地图级别
        zooms: [5, 30], // 地图缩放范围
        // 可以设置初始化当前位置
        center: [116.397428, 39.90923] // 初始化地图位置
      })
      // 添加控件
      AMap.plugin(
        [
          'AMap.ElasticMarker',
          'AMap.Scale',
          'AMap.ToolBar',
          'AMap.HawkEye',
          'AMap.MapType',
          'AMap.Geolocation',
        ],
        () => {
          map.addControl(new AMap.ElasticMarker()) // map.addControl为地图添加对应的控件
          map.addControl(new AMap.Scale())
          map.addControl(new AMap.ToolBar())
          map.addControl(new AMap.HawkEye())
          map.addControl(new AMap.MapType())
          map.addControl(new AMap.Geolocation())
        }
      )
      _this.map = map
    })
    .catch((e) => {
      console.log(e)
    })
},
}

3.2 Understand several basic map controls

AMap.ElasticMarker: Flexible point marker, a Marker that can change its style and size with the map level; the focus is on the car in the demonstration, which also scales as the map zooms:

AMap.Scale: Scale bar, which displays the scale bar at the center of the current map. Please understand the scale of the lower left corner according to the following figure:

AMap.ToolBar: Toolbar, controls the zoom of the map. See the following picture for details:

AMap.HawkEye: Hawk Eye, displays thumbnails to facilitate large-scale movement. The thumbnails can be used to control the movement of the map. By moving the map, the thumbnails can also be moved:

AMap.MapType: Layer switching, used for switching display of several commonly used layers, switching between standard map and satellite map in the upper right corner, road network and traffic conditions selection will be more clearly displayed on the map:

AMap.Geolocation: Get the user's current location and city, and locate the current location:

Google, Firefox:

IE browser:

Note: According to the editor's preliminary understanding (it can also be said that it is a mistake), the control adding method in this article only supports the type of frame below.

The editor will explain the use of more controls one by one later! !

Use of plug-ins-Getting Started-Tutorial-Map JS API | Amap Map API

3.3 Understanding basic classes

Basic Class-Getting Started-Tutorial-Map JS API | Amap Map API

AMap.LngLat: latitude and longitude;new AMap.LngLat (longitude, latitude), there are two ways of writing here, both representing longitude and latitude, And they all indicate the position, but the editor also recommends using the official document writing method. Although it is a bit troublesome, we regulate ourselves and it will be helpful to us in the future.
The valid range of longitude and latitude is from -180 degrees to +180 degrees, and the latitude is approximately -85 degrees to +85degree.

const position = new AMap.LngLat(116, 39);//标准写法

const position = [116, 39]; //简写

var map = new AMap.Center('conatiner',{
   center:position
})

When we need to draw a path, we need to use multiple latitudes and longitudes; when using an array of longitudes and latitudes, such as creating a polyline path, the writing method is as follows: ( Pay attention to the writing format : It is the collection form of an array composed of nested longitude and latitude in the array)

  var path = [new AMap.LngLat(116,39), new AMap.LngLat(116,40), new AMap.LngLat(117,39)] //标准写法

  var path = [ [116,39], [116,40], [117,39] ]; //简写

  var polyline = new AMap.Polyline({
      path : path,
  })
  map.add(polyline);

Calculation: Use the latitude and longitude type to perform some simple position calculations, such as the distance between points and points, point and line, calculating another longitude and latitude based on the distance difference, etc.: ( If yes Don’t worry about some travel distances or complex distances. Generally, there is no need to calculate. The interface will return us the results)

var lnglat1 = new AMap.LngLat(116, 39);
var lnglat2 = new AMap.LngLat(117, 39);
var distance = lnglat1.distance(lnglat2);//计算lnglat1到lnglat2之间的实际距离(m)

// offset(w:Number,s:Number) 当前经纬度坐标值经度移动w，纬度移动s，得到新的坐标。经度向右移为正值，纬度向上移为正值，单位为米。
var lnglat3 = lnglat1.offset(100,50)//lnglat1向东100m，向北50m的位置的经纬度

AMap.Pixel: offset. The pixel consists of two components: x and y. It is usually used to describe the container coordinates and geography of the map. Pixel coordinates (plane pixel coordinates), point markers and anchor points of information windows, etc. Here's how to use it:
Editor's understanding: The main function of this method is to control the position of the marker node relative to the location on the map, which can be fine-tuned.

  var offset  = new AMap.Pixel(-16,-30);
  var marker = new AMap.Marker({
      offset:offset,
      icon:'xxx.png',
  });
  map.add(marker);

AMap.Size: Pixel size. The pixel size consists of two components: width and height. It is usually used to describe objects with a certain size, such as Map size, icon size
You can set the size or get the size

  var mapSize = map.getSize();//获取地图大小，返回的是地图容器的像素大小
  var width = mapSize.width;
  var height = mapSize.height;

  var marker = new AMap.Marker({
      position: [116.405467, 39.907761],
      icon: new AMap.Icon({            
          size: new AMap.Size(40, 50),  //图标的大小
          image: "https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png",
          imageOffset: new AMap.Pixel(0, -60)
      })        
  });
  map.add(marker)

AMap.Bounds: latitude and longitude rectangular bounds (see documentation)
AMap.ArrayBounds: latitude and longitude path boundaries (see documentation)

Parameter list view:

Basic Class-Reference Manual-Map JS API | Amap Map API