博客

1.创建标点（bm-marker）

<template>
  <baidu-map
    :center="location"
    :zoom="zoom"
    style="height: 800px; width: 100%"
    :scroll-wheel-zoom="true"
  >
    <!-- bm-marker 就是标注点 定位在point的经纬度上 -->
    <bm-marker :position="markLocation" @click="checkDetail" >
    </bm-marker>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      location: { lng: 116.403963, lat: 39.915119 },
      zoom: 19,
      markLocation: {
        lng: 116.403963, lat: 39.915119
      },
    };

};
</script>

呈现效果

2.点击显示窗口（bm-info-window）

官方API文档

最重要的是 **

show

属性！！！**—展示信息窗口的属性

<template>
  <baidu-map
    :center="location"
    :zoom="zoom"
    style="height: 800px; width: 100%"
    :scroll-wheel-zoom="true"
  >
    <!-- bm-marker 就是标注点 定位在point的经纬度上 跳动的动画 -->
    <bm-marker :position="markLocation" @click="checkDetail" >
      <bm-info-window :title="showTitle" :show="showFlag"></bm-info-window>
    </bm-marker>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      location: { lng: 116.403963, lat: 39.915119 },
      zoom: 19,
      markLocation: {
        lng: 116.403963, lat: 39.915119
      },
      showTitle: "信息窗口",
      showFlag:false,
    };
  },
  methods:{
    checkDetail(){
      this.showFlag = !this.showFlag
    },
  },
};
</script>

实现效果