<template>
      <div id="allmap" style="height: 100%;width: 100%"></div>
</template>

<script setup>

var data = [];

var citys = [
  '北京',
  '天津',
  '上海',
  '重庆',
  '石家庄',
  '太原',
  '呼和浩特',
  '哈尔滨',
  '长春',
  '沈阳',
  '济南',
  '南京',
  '合肥',
  '杭州',
  '南昌',
  '福州',
  '郑州',
  '武汉',
  '长沙',
  '广州',
  '南宁',
  '西安',
  '银川',
  '兰州',
  '西宁',
  '乌鲁木齐',
  '成都',
  '贵阳',
  '昆明',
  '拉萨',
  '海口',
];
var randomCount = citys.length;

// 构造数据
while (randomCount--) {
  var cityName = citys[randomCount];
  data.push({
    geometry: {
      type: 'Point',
      coordinates: [116.404, 39.915],
    },
    properties: {
      text: cityName + '\n' + 116.404 + '，' + 39.915,
      // textColor: '#fff',
      // borderColor: ['#0f0', '#f00', '#00f'][randomCount % 3],
      // backgroundColor: ['#0f0', '#f00', '#00f'][randomCount % 3],
    },
  });
}

onMounted(() => {
  var map = new BMapGL.Map("allmap");    // 创建Map实例
  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 5);  // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


})

// var view = new mapvgl.View({
//   map: map,
// });
//
// var layer = new mapvgl.LabelLayer({
//   textAlign: 'center',
//   textColor: '#fc0',
//   borderColor: '#666',
//   backgroundColor: '#666',
//   // pickedTextColor: '#fff',
//   // pickedBorderColor: '#666',
//   // pickedBackgroundColor: '#666',
//   padding: [2, 5],
//   borderRadius: 5,
//   fontSize: 12,
//   lineHeight: 16,
//   collides: true, // 是否开启碰撞检测, 数量较多时建议打开
//   enablePicked: true,
//   autoSelect: true,
//   onClick: e => {
//     // 点击事件
//     console.log('click', e);
//   },
// });
// view.addLayer(layer);
// layer.setData(data);

</script>