Can this extension implement polygons and polylines on Google Map? about echarts-extension-gmap HOT 9 CLOSED

<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { ScatterChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent
} from "echarts/components";
// import google map extension
import "echarts-extension-gmap";
import VChart from "vue-echarts";
import { ref, defineComponent, onMounted } from "vue";

use([
  CanvasRenderer,
  ScatterChart,
  TitleComponent,
  TooltipComponent
]);

function isGoogleMapAPILoaded() {
    return typeof google !== 'undefined' && typeof google.maps !== 'undefined'
}

function loadGoogleMapScript() {
    const mapScriptURL = 'https://maps.googleapis.com/maps/api/js?key=you key';
    return new Promise((resolve, reject) => {
      // if google map API script has loaded, no need to insert it again
      if (isGoogleMapAPILoaded()) {
        resolve()
      } else {
        const scriptNode = document.createElement('script')
        scriptNode.setAttribute('type', 'text/javascript')
        scriptNode.setAttribute('charset', 'utf-8')
        scriptNode.setAttribute('src', mapScriptURL)
        scriptNode.setAttribute('id', 'google-map-api-script')
        scriptNode.onload = () => {
          if (isGoogleMapAPILoaded()) {
            resolve()
          } else {
            reject('failed to load google map API script')
          }
        }
        scriptNode.onerror = e => {
          reject(e)
        }
        // check again before inserting script
        if (isGoogleMapAPILoaded()) {
          resolve()
        } else {
          document.head.appendChild(scriptNode)
        }
      }
    })
}

export default defineComponent({
  name: "HelloWorld",
  components: {
    VChart
  },
  setup: () => {
    const option = ref();

    onMounted(async () => {
      // load api
      await loadGoogleMapScript()

      option.value = {
        title: {
          text: "Traffic Sources",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
        },
        gmap: {
          center: [108.39, 39.9],
          zoom: 4
        },
        series: [
          {
            name: "Scatter",
            type: "scatter",
            coordinateSystem: "gmap",
            data: [
              [120, 30, 50]
            ],
            encode: {
              value: 2
            }
          }
        ]
      }
    })

    return { option };
  }
});
</script>

<style scoped>
.chart {
  height: 100vh;
}
</style>

<style>
body {
  margin: 0;
}
</style>