<template>
  <div ref="mapContainer" id="map" style="width: 100%; height: 400px;"></div>
</template>

<script>
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";

export default {
  name: "MapContainer",
  data() {
    return {
      map: null,
      layer: null
    };
  },
  methods: {
    addpointtomap(lon,lat){
      var marker1 = new maptalks.Marker(
          [116.255535,40.204654],
          {
            'symbol': {
              'markerType': 'ellipse',
              'markerFill': 'rgb(135,196,240)',
              'markerFillOpacity': 1,
              'markerLineColor': '#34495e',
              'markerLineWidth': 3,
              'markerLineOpacity': 1,
              'markerLineDasharray': [],
              'markerWidth': 40,
              'markerHeight': 40,
              'markerDx': 0,
              'markerDy': 0,
              'markerOpacity': 1
            }
          }
      )
      marker1.addTo(this.layer);

    },
    initializeMap() {
      this.map = new maptalks.Map('map', {
        center: [-0.113049,51.498568],
        zoom: 14,
        compassControl: {
          position: 'top-left',
        },

        baseLayer: new maptalks.TileLayer('base', {
          urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
          subdomains: ['a','b','c','d'],
          attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
        })
      });
      this.map.setCenter([116.255535,40.204654]);
      this.layer=new maptalks.VectorLayer('vector').addTo(this.map);
      this.addpointtomap(0,0)
    }
  },

  mounted() {
    this.initializeMap();
    // const mapOptions = {
    //   center: [0, 0],
    //   zoom: 10
    // };
    //
    // const map = new Map(this.$refs.mapContainer, mapOptions);
  }
};


</script>


<style scoped>

</style>
