百度地图 弹窗 更改图标 标注多个点bm-marker bm-info-window 画圆

 官方文档: 

Vue Baidu Map

 百度地图开放平台:逆地理编码 gc | 百度地图API SDK

百度地图示例中心:地图JS API示例 | 百度地图开放平台

参考文献:百度地图JSAPI 2.0类参考

  

<div class="map">
        <baidu-map
          class="center"
          :center="center"
          :zoom="zoom"
          style="height: 100%"
          :map-click="false"
          :scroll-wheel-zoom="true"
        >
          <bm-marker
            v-for="(marker, index) in transportationData"
            :key="marker.title"
            :position="{ lng: marker.lng, lat: marker.lat }"
            
            :icon="{
                url: baiduicon.icon,
                size: { width: baiduicon.width, height: baiduicon.height },
              }"
            @click="lookDetail(index)"
          ></bm-marker>

          <bm-info-window
            :position="{ lng: infoWindow.lng, lat: infoWindow.lat }"
            :title="infoWindow.title"
            :show="infoWindow.show"
            @close="infoWindowClose"
            @open="infoWindowOpen"
          >
            <p v-text="infoWindow.contents"></p>
          </bm-info-window>
        </baidu-map>
      </div>

 center: { lng: 121.552402, lat: 31.269178 },
      radius: 2000, // 圆圈范围半径 3公里范围内
      zoom: 15, //3-19级
      
      baiduicon: {
        icon: require("../assets/images/dt.png"),
        width: 70,
        height: 70
      },

      //交通区位资源配套
      transportationData: [
        {
          lng: 121.552402,
          lat: 31.269178,
          title: "上海火车站1",
          contents:
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        },
        {
          lng: 121.652402,
          lat: 31.269178,
          title: "上海火车站2",
          contents:
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        },
        {
          lng: 121.552402,
          lat: 31.769178,
          title: "上海火车站3",

          contents:
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        },
        {
          lng: 121.552402,
          lat: 31.969178,
          title: "上海火车站4",
          contents:
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        }
      ],
      infoWindow: {
        lng: 121.552402,
        lat: 31.269178,
        title: "上海火车站1",
        show: true,
        contents:
          "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    };

    // 设置圆圈范围及半径
    updateCirclePath() {
      this.center.lng = 118.7995;
      this.center.lat = 31.9663;
      this.radius = 2000;
    },

    infoWindowClose() {
      this.$set(this.infoWindow, "show", false);
    },
    infoWindowOpen() {
      this.$set(this.infoWindow, "show", true);
    },
    lookDetail(index) {
      this.infoWindow = null;
      this.infoWindow = this.transportationData[index];
      this.$set(this.infoWindow, "show", true);
    },

 画圆

 <!-- animation="BMAP_ANIMATION_BOUNCE" //图标动画 -->
    <el-row :gutter="20">
      <el-row class="title">本地生活资源配套(2公里范围内)</el-row>
      <div class="map">
        <baidu-map
          class="center"
          :center="center"
          :zoom="zoom"
          style="height: 100%"
          :map-click="false"
          :scroll-wheel-zoom="true"
        >
          
          <bm-marker
            :position="{ lng: center.lng, lat: center.lat }"
            :icon="{
                url: baiduicon.icon,
                size: { width: baiduicon.width, height: baiduicon.height },
              }"
          ></bm-marker>
          <bm-circle
            :center="center"
            :radius="radius"
            stroke-color="#EC4141"
            :stroke-weight="2"
            fillColor
          ></bm-circle>
        </baidu-map>
      </div>
    </el-row>