Внедрение компонентов Vue IMap (карта Google) с помощью сборника рассказов

Archieced:

• vue-cli, сборник рассказов
• использовать API карты Google
• Компонент IMap
• Сборник рассказов IMap

Шаг за шагом:

• Шаг 1: создать проект gcp (облачная платформа google) и активный относительный api карты google
• Шаг 2: установите проект с помощью vue-cli
• Шаг 3: инициализация сборника рассказов vue
• Шаг 4: реализовать компонент IMap
• Шаг 5: реализовать историю компонента IMap

исходный код

• Https://github.com/sky790312/vue-google-map-with-storybook

Шаг 1: создать проект gcp (облачная платформа google) и активный относительный api карты google

используйте свою учетную запись google, перейдите в gcp и создайте новый проект. Затем активная карта Google относительно api.

• Облачная платформа google

Здесь необходимо активировать «Google Maps JavaScript API», «Google Maps Geocoding API», «Google Places API Web Service» для использования компонента IMap.

Шаг 2: установите проект с помощью vue-cli

yarn global add vue-cli
vue init [my-vue-app] 
...

• Vue-cli

Шаг 3: инициализация сборника рассказов vue

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

yarn global add @storybook/cli
cd [my-vue-app]
getstorybook

Это создаст в вашем проекте относительную обстановку и истории из сборника рассказов.

Сборник рассказов vue

Шаг 4: реализовать компонент IMap

Здесь нам нужно загрузить его скрипт и инициализировать карту Google в вашем проекте. у вас есть два способа загрузить скрипт:

1. загрузить скрипт в inde.html

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7vz8rdHAJoMRNfGC5ieJSvWkqevlRJDc&libraries=places"></script>

1. загрузить скрипт в js файл

(function(d, s, id){
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement(s); js.id = id;
 js.async = true;
 js.defer = true;
 js.src = `https://maps.googleapis.com/maps/api/js?key=${api.googleApiKey}&libraries=places`
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'gmap'));

• простой в использовании IMap в App.vue, например:

<template>
     <i-map
       :lat="-34.4"
       :lng="150.644">
     </i-map>
</template>
<script>
import IMap from './components/IMap'
export default {
 name: 'app',
 components: {
   IMap
 }
}
</script>

Вы можете проверить более подробную информацию в документе gogole map api. У него отличный документ.
google map api doc

Шаг 5: реализовать историю компонента IMap

добавьте preview-head.html в папку .storybook и включите scirpt карты Google.
(Его сборник рассказов встроил iframe в html)

• /.storybook/preview-head.html

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7vz8rdHAJoMRNfGC5ieJSvWkqevlRJDc&libraries=places"></script>

Вы можете использовать больше дополнений для сборника рассказов, установив его. Но сначала вам нужно установить React. проверьте здесь:
https://github.com/storybooks/storybook/issues/1751

• добавить историю компонента IMap. Есть несколько примеров для использования vue в сборнике рассказов. Так же, как писать vue. бывший:

import { storiesOf } from '@storybook/vue';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import IMap from '../components/IMap.vue';
const lat = 23.90
const lng = 121.07
storiesOf('IMap', module)
  .add('with draggable marker', () => ({
    components: { IMap },
    template: `
      <div style="width: 800px;height: 600px;">
        <i-map
          :lat="${lat}"
          :lng="${lng}"
          :draggable="true">
        </i-map>
      </div>`
  }))

Финал:

yarn run dev //check localhost:8080 
yarn run storybook // check localhost:6006

Здесь просто используется карта Google в качестве образца компонента сборника рассказов. Шаг за шагом и размышления.
Вы должны разработать свой компонент vue и показать спецификацию пользовательского интерфейса по сборнику рассказов. Это хорошие привычки, которые нужно развивать.

Вы можете проверить все это в моем гитхабе.
(https://github.com/sky790312/vue-google-map-with-storybook)

Спасибо!