vue amap

1. Представление проекта

На основе шаблона vue-admin-template была разработана версия Amap JSAPI2.0 vue. Причина написания в том, что во время разработки я столкнулся с множеством проблем, а также с некоторыми подводными камнями (в то время я использовал Baidu Maps, а позже также использовал Amap). Поэтому я использовал свое свободное время для написания версии центра образцов Amap на Vue. Поскольку я разработчик Java и имею ограниченные навыки работы с интерфейсом, я надеюсь, что все эксперты по интерфейсу проявят милосердие к моим плохим навыкам письма.

Проект был разработан со ссылкой на центр примеров JSAPI2.0 компании Amap. Адрес примера: https://lbs.amap.com/demo/list/jsapi-v2. В случае каких-либо нарушений, пожалуйста, свяжитесь с адресом электронной почты. : [email protected], чтобы удалить его.

Справочное руководство официального сайта AMAP: https://lbs.amap.com/api/jsapi-v2/documentation.

2. Онлайн-опыт

• админ/111111

Демо-адрес: https://amap.java521.com

3. Используйте

3.1.Настройка сборки

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

Доступ через браузер 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. Карта Гаоде

4.1. Зарегистрируйтесь как разработчик.

1. Адрес регистрации: https://lbs.amap.com/dev/id/choose.

2. Выберите тип разработчика

• индивидуальный разработчик
• Корпоративный разработчик

3. Улучшите информацию для разработчиков

4.2. Войдите в консоль.

1. Адрес консоли: https://console.amap.com/dev/index.

2. Выберите «Управление приложениями» — «Мои приложения».

3. Создайте новое приложение, введите имя приложения и выберите тип приложения.

4. Добавьте ключ, введите имя ключа и выберите Интернет (JS API) в качестве платформы обслуживания.

4.3. Использование в проектах

1. Найдите файл public/index.html и замените его своим ключом.

2. Если вам нужна собственная карта

• Адрес пользовательского шаблона карты: https://lbs.amap.com/dev/mapstyle/index.
• Существует два типа пользовательских карт.
  • Используйте официальные стили карты
  • Создавайте и используйте собственные карты
  • Установите отображение содержимого карты

4.4. Используйте официальный стиль карты.

Есть два способа установить стиль карты:

• Устанавливается при инициализации карты:

  JavaScript

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

• После создания карты используйте метод setMapStyle объекта Map, чтобы изменить ее:

  JavaScript

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

4.5. Используйте собственные карты.

Сначала зарегистрируйтесь в качестве разработчика открытой платформы AMAP. Затем, после создания, редактирования и публикации на платформе пользовательской карты, получите идентификатор стиля карты .

Есть два способа настроить собственную карту:

• Когда карта инициализируется, установите пользовательскую карту:

  JavaScript

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

• После создания карты используйте метод setMapStyle объекта Map чтобы изменить стиль карты:

  JavaScript

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

4.6. Настройте отображение содержимого карты.

Установите отображаемую часть элементов базовой карты с помощью метода setFeatures :

JavaScript

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

В настоящее время для выборочного отображения поддерживаются следующие четыре типа функций карты:

имя	иллюстрировать
бг	Плоскость площади
точка	достопримечательности
дорога	Дороги и дорожная разметка
здание	здание