vue amap

1. Project introduction

Based on vue-admin-template as a template, the vue version of Amap JSAPI2.0 was developed. The reason for writing is because I encountered a lot of problems during development, as well as some pitfalls encountered during development (I used Baidu Maps at the time, and later also used Amap). Therefore, I used my spare time to write a Vue version of the Amap sample center. Since I am a Java developer and have limited front-end skills, I hope all front-end experts will show mercy on my poor writing skills.

The project was developed with reference to the JSAPI2.0 example center of Amap. The example address is: https://lbs.amap.com/demo/list/jsapi-v2. If there is any infringement, please contact the email address: [email protected] to delete it.

AMAP official website reference manual: https://lbs.amap.com/api/jsapi-v2/documentation

2. Online experience

• admin/111111

Demo address: https://amap.java521.com

3. Use

3.1.Build Setup

 # 克隆项目
git clone git clone https://gitee.com/java5219/vue-amap.git

# 进入项目目录
cd vue-amap

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

Browser access http://localhost:9528

3.2. Release

 # 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

3.3. Others

 # 预览发布环境效果
npm run preview

# 预览发布环境效果 + 静态资源分析
npm run preview -- --report

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix

4. Gaode Map

4.1. Register as a developer

1. Registration address: https://lbs.amap.com/dev/id/choose

2. Select developer type

• individual developer
• Enterprise Developer

3. Improve developer information

4.2. Enter the console

1. Console address: https://console.amap.com/dev/index

2. Select Application Management--My Applications

3. Create a new application, enter the application name and select the application type

4. Add key, enter the key name, and select Web (JS API) as the service platform.

4.3. Use in projects

1. Find the public/index.html file and replace it with your own key

2. If you need a custom map

• Custom map template address: https://lbs.amap.com/dev/mapstyle/index
• There are two types of custom maps
  • Use official map styles
  • Create and use custom maps
  • Set the display content of the map

4.4. Use official map style

There are two ways to set the map style:

• Set when the map is initialized:

  JavaScript

   var map = new AMap . Map ( 'container' , {
      mapStyle : 'amap://styles/whitesmoke' , //设置地图的显示样式
  } ) ;

• After the map is created, use the setMapStyle method of the Map object to modify it:

  JavaScript

   var map = new AMap . Map ( 'container' , {
      zoom : 10 , //设置地图的缩放级别
  } ) ;
  map . setMapStyle ( 'amap://styles/whitesmoke' ) ; 

4.5. Use custom maps

First, register to become a developer of the AMAP open platform. Then, after creating, editing, and publishing on the custom map platform, obtain the map style ID .

There are two ways to set up a custom map:

• When the map is initialized, set a custom map:

  JavaScript

   var map = new AMap . Map ( 'container' , {
      mapStyle : 'amap://styles/地图样式ID' , //设置地图的显示样式
  } ) ;

• After the map is created, use the setMapStyle method of Map object to change the map style:

  JavaScript

   var map = new AMap . Map ( 'container' ,{
      zoom : 10 , //设置地图的缩放级别
  });
  map . setMapStyle ( 'amap://styles/地图样式ID' );

4.6. Set the display content of the map

Set the display part of the basemap elements through the setFeatures method:

JavaScript

 map.setFeatures("road");  // 单一种类要素显示
map.setFeatures(['road','point']); // 多个种类要素显示

Currently, the following four types of map features are supported for selective display:

name	illustrate
bg	area plane
point	points of interest
road	Roads and road markings
building	building