Создание динамических c маркеров Google Map с помощью SVG - PullRequest
Новая
       120

Создание динамических c маркеров Google Map с помощью SVG

0 голосов
/ 05 августа 2020

Я пытаюсь создать маркеры карты Google с динамической c информацией в нем. Для этой функции я использую Vuejs -Компонент с SVG в качестве шаблона и добавляю «текст» -Tag .

Пример: 

<template>
    <svg width="40px" height="56px" viewBox="0 0 40 56" version="1.1" xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
        <text>{{ text }}</text>
    </svg>
</template>

<script>
    export default {
        name: "DynamicGMapMarker",
        props: {
            text: {
                type: String,
                required: true
            }
        }
    }
</script>

Затем Я создаю SVG с помощью вспомогательной функции и создаю URL-адрес данных base64: 

import Vue from 'vue'
import DynamicGMapMarker from './DynamicGMapMarker'

const DynamicGMapMarkerConstructor = Vue.extend(DynamicGMapMarker)

export const getDynamicMarkerIcon = (text) => {
    const iconComponent = new DynamicGMapMarkerConstructor({
        propsData: {
            text
        }
    });
    iconComponent.$mount();
    const iconDom = iconComponent.$el;
    const iconString = new XMLSerializer().serializeToString(iconDom);
    return 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(iconString);
}

Теперь я могу использовать функцию getDynamicMarkerIcon(). Это работает в vue. js, но не в nuxt. js. В nuxt. js нам нужно добавить XML -Serializer из npm, поскольку nuxt не может использовать XMLSerializer браузера. Для этого я использую teclone / xml -serializer .

Теперь проблема, похоже, в том, что Nuxt не может создать DOM из-за SSR. Когда я пытаюсь использовать этот метод: 

<template>
    <div id="app">
        <GmapMap
                :center="center"
                :zoom="15"
                :options="options"
                id="map"
        >
            <GmapCluster :zoomOnClick="true">
                <GmapMarker
                        :key="index"
                        v-for="(marker, index) in markers"
                        :position="marker.coordinates"
                        :clickable="true"
                        :draggable="false"
                        :title="marker.name"
                        :icon="getMarker(marker)"
                />
            </GmapCluster>
        </GmapMap>
    </div>
</template>

<script>
    import GmapCluster from 'vue2-google-maps/dist/components/cluster'
    import {getMarkerIcon} from "./MapIconUtil"

    export default {
        name: 'App',
        components: {
            GmapCluster
        },
        methods: {
            getMarker(marker) {
                return getDynamicMarkerIcon(marker.text);
            }
        },
        data() {
            return {
                options: {
                    zoomControl: false,
                    mapTypeControl: false,
                    scaleControl: false,
                    streetViewControl: false,
                    rotateControl: false,
                    fullscreenControl: false,
                    disableDefaultUi: true,
                    clickableIcons: false
                },
                center: {
                    lat: 11,
                    lng: 11
                },
                "markers": [
                    {
                        coordinates: {
                            name: "Test",
                            lat: 11.0001,
                            lng: 11.0001,
                            text: "101"
                        }
                    }
                ]
            }
        }
    }
</script>

, я получаю сообщение об ошибке, что iconComponent.$el не определено. Я не могу смонтировать SVG внутри DOM.

Есть ли какие-нибудь возможности сообщить Nuxt, что этот компонент должен работать только на стороне браузера?

Я уже пытался обернуть GmapMarker в <client-only> -Тег. Это не сработало. Могу ли я использовать что-то вроде «виртуального DOM»? Есть еще идеи, как заставить его работать?

1 Ответ

0 голосов
/ 06 августа 2020

Я сделал это. Вы можете выборочно изменить «режим», в котором nuxt будет отображать указанный c url. Здесь вы можете увидеть, какие конфигурации возможны.

Вы должны создать промежуточное программное обеспечение сервера и сообщить nuxt, должен ли путь отображаться в spa . В противном случае просто по умолчанию используется ваш режим, указанный в вашем nuxt.config. js.

Посмотрите это для примера.

...