vue腾讯地图只显示城市

在Vue.js中使用腾讯地图API时，如果你只想显示城市的名称或标记，你可以通过以下步骤操作：

1. 首先，你需要引入腾讯地图的JavaScript API库。可以在项目中通过CDN引入：

<script src="https://map.qq.com/api/js?v=2.4.7"></script>

2. 创建一个包含城市信息的数据对象，并绑定到视图上：

<template>
  <div id="map">
    <div v-for="city in cities" :key="city.id">
      <q-maps-marker :lat-lng="city.latLng" :title="city.name">
        {{ city.name }}
      </q-maps-marker>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cities: [
        { id: '1', name: '北京', latLng: [39.9042, 116.4074] },
        // 其他城市数据...
      ]
    };
  }
};
</script>

在这个例子中，`q-maps-marker`是一个自定义组件，它会创建一个标记并显示城市名。`latLng`属性用于设置地图坐标。

3. 使用地图实例的`addMarkers()`方法添加城市标记，仅显示城市名字：

mounted() {
  const map = new qq.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: this.cities[0].latLng
  });

  this.cities.forEach(city => {
    map.addMarker({
      position: city.latLng,
      title: city.name
    });
  });
}