Серия демонстраций с использованием API карты Baidu в React

Байду внешний интерфейс JavaScript React.js

адрес гитхаба:GitHub.com/победные очки/…

Это обновление

  • Экземпляр карты: отображение карты

предисловие

Из-за предыдущей работы часто используются различные карты, такие как Baidu Maps, AutoNavi Maps, Google Maps и т. д. Итак, я хочу разобраться и написать набор различных демонстраций, которые используют API карты в соответствии с различными потребностями, поэтому давайте возьмем карту Baidu в качестве примера.

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

Технология

  • React -----> create-react-appОснова для быстрого построения React, официально разработанная facebook.
  • Карта БайдуJavaScript API-------> API карты Baidu, используемый на веб-странице
  • antd design -----> Высококачественные компоненты React из коробки.

(1) Передняя конструкция

1. Используйте скаффолдинг create-react-app, официально разработанный facebook, чтобы создать интерфейсный фреймворк для реагирования.

(1) Глобально установить приложение create-реагировать

npm install -g create-react-app

(2) Создать проект

create-react-app react-map
npm run eject //可省略，只为了看配置 config
npm start

Из этого каталога проекта, как показано ниже

(3) Эксплуатация

npm start

Открытьlocalhost:3000Мы увидим картинку выше, а затем будем опираться на нее.

(4) Зависимости установки

npm install antd react-router --save

Чтобы иметь возможность загрузки по запросу при использовании antd, сначала настройте babel-plugin-import Это плагин babel для загрузки кода компонентов и стилей по запросу.

npm install babel-plugin-import --save-dev

Затем добавьте конфигурацию в package.json.

·····省略其他
   "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
      ]
    ]
  },
  ·····省略其他

Используйте декоратор

npm install --saveDev babel-plugin-transform-decorators-legacy

然后在package.json中加入配置
·····省略其他
   "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
    "transform-decorators-legacy",
      [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
      ]
    ]
  },
  ·····省略其他

Базовый макет страницы

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

(1) Получите API карты Baidu. В Интернете есть много руководств, поэтому я не буду его представлять. Если вы не хотите его получать, вы можете сначала использовать мой ключ.2NZa1O1V3BHmsDlX9fdomGaO3S5b1AEo(2) Добавлено в public/index.html

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2NZa1O1V3BHmsDlX9fdomGaO3S5b1AEo"></script>

(3) реакция использует BMap

фокус фокус! ! ! !Если вы используете его напрямую

let map =new BMap.Map("allmap");

сообщит об ошибке

Есть два решения может относиться кБлог Woohoo.cn на.com/soft idea/afraid/…Это зависит от вашего выбора.

В этой статье выбран второй в config/webpack.config.dev.js

module.exports = {
 externals:{
    'BMap':'BMap',
    },
}

Затем в jsx, который вы хотите использовать, добавьте

import BMap from 'BMap';

успех! ! ! !

Карта отображается демо

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

Часть 1 Сила карты

На официальном сайте сила карты следующая:

На данный момент структура моего проекта выглядит следующим образом:

отображение карты

src/components/bmap/mapSample/BasicMapView.jsx

(1) Импорт BMap

import BMap from 'BMap';

(2) Отображение карты Теперь сделайте идентификатор карты, высоту, ширину и другую информацию в рендере.

  <div style={{width:"100%",height:"100%"}} id={"allmap"}></div>

Затем привяжите id к карте в componentDidMount, скопируйте и вставьте пример официального сайта

 componentDidMount(){
        let map =new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_HYBRID_MAP,//混合地图
                BMAP_NORMAL_MAP//地图
            ]}));
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    }

В этот момент я обнаружил, что emmmmm сообщил об ошибке

Bmap_normal_map, 'bmap_hybrid_map' не определенНо после печати Console.log (окно), которое на самом деле нашел окно, поэтому вы можете использовать специальные JS сохранить данные. Эти параметры указаны в общем / bmap_data.js в

export const BMAP_NORMAL_MAP =window.BMAP_NORMAL_MAP;
export const BMAP_HYBRID_MAP = window.BMAP_HYBRID_MAP;

Затем импортируйте в src/components/bmap/mapSample/BasicMapView.jsx.

import {BMAP_HYBRID_MAP, BMAP_NORMAL_MAP} from "../../../common/BMAP_DATA";

Возьми!

Категории