vue amap

1. Introducción del proyecto

Basado en vue-admin-template como plantilla, se desarrolló la versión vue de Amap JSAPI2.0. La razón para escribir es porque encontré muchos problemas durante el desarrollo, así como algunas trampas encontradas durante el desarrollo (usé Baidu Maps en ese momento y luego también usé Amap). Por lo tanto, utilicé mi tiempo libre para escribir una versión Vue del centro de muestras de Amap. Dado que soy un desarrollador de Java y tengo habilidades de front-end limitadas, espero que todos los expertos en front-end tengan piedad de mis malas habilidades de escritura.

El proyecto se desarrolló con referencia al centro de ejemplo JSAPI2.0 de Amap. La dirección de ejemplo es: https://lbs.amap.com/demo/list/jsapi-v2. Si hay alguna infracción, comuníquese con la dirección de correo electrónico. : [email protected] para eliminarlo.

Manual de referencia del sitio web oficial de AMAP: https://lbs.amap.com/api/jsapi-v2/documentation

2. Experiencia en línea

• administración/111111

Dirección de demostración: https://amap.java521.com

3. uso

3.1.Configuración de compilación

 # 克隆项目
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

Acceso al navegador http://localhost:9528

3.2.

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

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

3.3.Otros

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

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

# 代码格式检查
npm run lint

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

4. Mapa de Gaode

4.1. Regístrate como desarrollador

1. Dirección de registro: https://lbs.amap.com/dev/id/choose

2. Seleccione el tipo de desarrollador

• desarrollador individual
• Desarrollador empresarial

3. Mejorar la información del desarrollador

4.2. Ingresar a la consola

1. Dirección de la consola: https://console.amap.com/dev/index

2. Seleccione Gestión de aplicaciones--Mis aplicaciones

3. Cree una nueva aplicación, ingrese el nombre de la aplicación y seleccione el tipo de aplicación.

4. Agregue la clave, ingrese el nombre de la clave y seleccione Web (JS API) como plataforma de servicio.

4.3. Uso en proyectos

1. Busque el archivo public/index.html y reemplácelo con su propia clave.

2. Si necesitas un mapa personalizado

• Dirección de plantilla de mapa personalizada: https://lbs.amap.com/dev/mapstyle/index
• Hay dos tipos de mapas personalizados.
  • Utilice estilos de mapas oficiales
  • Crear y usar mapas personalizados
  • Establecer el contenido de visualización del mapa.

4.4. Usar el estilo del mapa oficial

Hay dos formas de configurar el estilo del mapa:

• Establecer cuándo se inicializa el mapa:

  javascript

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

• Una vez creado el mapa, utilice el método setMapStyle del objeto Map para modificarlo:

  javascript

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

4.5. Utilice mapas personalizados

Primero, regístrese para convertirse en desarrollador de la plataforma abierta AMAP. Luego, después de crear, editar y publicar en la plataforma de mapas personalizados, obtenga el ID del estilo del mapa .

Hay dos formas de configurar un mapa personalizado:

• Cuando se inicializa el mapa, configure un mapa personalizado:

  javascript

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

• Una vez creado el mapa, utilice el método setMapStyle del objeto Map para cambiar el estilo del mapa:

  javascript

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

4.6. Establecer el contenido de visualización del mapa.

Configure la parte de visualización de los elementos del mapa base mediante el método setFeatures :

javascript

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

Actualmente, se admiten los siguientes cuatro tipos de funciones de mapa para la visualización selectiva:

nombre	ilustrar
bg	plano de área
punto	puntos de interés
camino	Carreteras y marcas viales.
edificio	edificio