vue amap

1. Introdução do projeto

Com base no vue-admin-template como modelo, a versão vue do Amap JSAPI2.0 foi desenvolvida. A razão para escrever é porque encontrei muitos problemas durante o desenvolvimento, bem como algumas armadilhas encontradas durante o desenvolvimento (usei o Baidu Maps na época e, mais tarde, também usei o Amap). Portanto, usei meu tempo livre para escrever uma versão Vue do centro de amostras Amap. Como sou um desenvolvedor Java e tenho habilidades limitadas de front-end, espero que todos os especialistas em front-end tenham misericórdia de minhas fracas habilidades de escrita.

O projeto foi desenvolvido com referência ao centro de exemplo JSAPI2.0 do Amap. O endereço de exemplo é: https://lbs.amap.com/demo/list/jsapi-v2. Se houver alguma violação, entre em contato pelo endereço de e-mail. : [email protected] para excluí-lo.

Manual de referência do site oficial do AMAP: https://lbs.amap.com/api/jsapi-v2/documentation

2. Experiência on-line

• administrador/111111

Endereço de demonstração: https://amap.java521.com

3. Uso

3.1.Configuração da versão

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

Acesso pelo navegador http://localhost:9528

3.2.

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

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

3.3.

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

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

# 代码格式检查
npm run lint

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

4. Mapa Gaode

4.1.Registre-se como desenvolvedor

1. Endereço de registro: https://lbs.amap.com/dev/id/choose

2. Selecione o tipo de desenvolvedor

• desenvolvedor individual
• Desenvolvedor Corporativo

3. Melhore as informações do desenvolvedor

4.2. Entre na consola

1. Endereço do console: https://console.amap.com/dev/index

2. Selecione Gerenciamento de Aplicativos – Meus Aplicativos

3. Crie um novo aplicativo, insira o nome do aplicativo e selecione o tipo de aplicativo

4. Adicione a chave, insira o nome da chave e selecione Web (JS API) como plataforma de serviço.

4.3. Uso em projetos

1. Encontre o arquivo public/index.html e substitua-o por sua própria chave

2. Se você precisar de um mapa personalizado

• Endereço do modelo de mapa personalizado: https://lbs.amap.com/dev/mapstyle/index
• Existem dois tipos de mapas personalizados
  • Use estilos de mapa oficiais
  • Crie e use mapas personalizados
  • Defina o conteúdo de exibição do mapa

4.4. Use o estilo de mapa oficial

Existem duas maneiras de definir o estilo do mapa:

• Defina quando o mapa é inicializado:

  JavaScript

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

• Depois que o mapa for criado, use o método setMapStyle do objeto Map para modificá-lo:

  JavaScript

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

4.5. Use mapas personalizados

Primeiro, registre-se como desenvolvedor da plataforma aberta AMAP. Então, após criar, editar e publicar na plataforma de mapa personalizado, obtenha o ID do estilo do mapa .

Existem duas maneiras de configurar um mapa personalizado:

• Quando o mapa for inicializado, defina um mapa personalizado:

  JavaScript

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

• Depois que o mapa for criado, use o método setMapStyle do objeto Map para alterar o estilo do mapa:

  JavaScript

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

4.6 Defina o conteúdo de exibição do mapa

Defina a parte de exibição dos elementos do mapa base por meio do método setFeatures :

JavaScript

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

Atualmente, os quatro tipos de recursos de mapa a seguir são suportados para exibição seletiva:

nome	ilustrar
obrigado	plano de área
apontar	pontos de interesse
estrada	Estradas e marcações rodoviárias
prédio	prédio