18、地理定位博客与在线商店项目开发指南

地理定位博客与在线商店项目开发指南

地理定位博客项目

地图设置与标记显示

在 BlogMap.vue 组件中，我们需要进行一些设置以实现地图的功能。首先，映射新的 setBounds 动作，并为地图添加 ref 和 idle 事件监听器：

<googlemaps-map
  ref="map"
  :center="center"
  :zoom="zoom"
  :options="mapOptions"
  @update:center="setCenter"
  @update:zoom="setZoom"
  @click="onMapClick"
  @idle="onIdle"
>

同时，添加对应的 onIdle 方法来调度 setBounds 动作并传递地图边界：

onIdle () {
  this.setBounds(this.$refs.map.getBounds())
},

接下来，我们要显示标记。在 BlogMap 组件中，使用 googlemaps-marker 循环遍历帖子并为每个帖子显示一个标记：

<