Vue中使用百度地图demo Vue Baidu Map(vue-baidu-map)设置窗口信息

野性酷女 2022-12-10 08:51 452阅读 0赞

1.全局引入

安装  npm install --save vue-baidu-map

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxMzYxNTQ4MDczNw_size_16_color_FFFFFF_t_70][]

1.2全局配置 在main.js中配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxMzYxNTQ4MDczNw_size_16_color_FFFFFF_t_70 1][]

效果图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxMzYxNTQ4MDczNw_size_16_color_FFFFFF_t_70 2][]

二.代码

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
    
        
        <baidu-map
          class="bm-view"
          :center="center"
          :zoom="zoom"
          @ready="handler"
          :auto-resize="true"
          :scroll-wheel-zoom="true"
        >
          <bm-marker
            v-for="(item, index) in points"
            :key="index"
            :position="{ lng: item.lng, lat: item.lat }"
            @click="clickHandler(item.content,item.lng,item.lat)"
            :icon="item.icon"
    
          >
          </bm-marker>
          <bm-info-window
            :show="show"
            :position="windowposition"
            @close="infoWindowClose"
            @open="infoWindowOpen"
            >{
       {content}}</bm-info-window
          >
    
          <bm-polyline
            :path="points"
            stroke-style="dashed"
            stroke-color="blue"
            :stroke-opacity="0.3"
            :stroke-weight="1"
          ></bm-polyline>
    
          
        </baidu-map>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to map',
          center: { lng: 112, lat: 37 },
          zoom: 14,
          points: [],
          windowposition: {},
          content: {},
          show: false,
          icon: { url: "http://api.map.baidu.com/library/LuShu/1.2/examples/car.png"},
    
        }
      },
        mounted() {
    
        this.addPoints();
      },
      methods: {
    
        //地图实例
        handler({ BMap, map }) {
          console.log(BMap, map);
          this.center.lng = 112.404;
          this.center.lat = 37.755;
          this.zoom = 10;
        },
        clickHandler(content,lng,lat) {
          // alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
          this.windowposition = { lng: lng, lat: lat };
          this.content=content;
          this.show = true;
        },
        addPoints() {
          const points = [];
          for (var i = 0; i < 10; i++) {
            let icon = this.icon;
            const position = {
              lng: Math.random() + 112,
              lat: Math.random() + 37,
              content: "我爱北京天安门" + i,
              ico: icon,
            };
            points.push(position);
          }
          this.points = points;
    
          console.log("this.points", this.points);
        },
        infoWindowOpen() {
          this.show = true;
        },
        infoWindowClose() {
          this.show = false;
        },
      }
    }
    </script>
    
    <style scoped>
    .bm-view {
      width: 100%;
      height: 800px;
    }
    </style>

3.参考[百度Vue Baidu Map][Vue Baidu Map]

4.代码下载 [代码下载][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxMzYxNTQ4MDczNw_size_16_color_FFFFFF_t_70]: /images/20221123/5c3692ebddf34175a359c046532ffe2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxMzYxNTQ4MDczNw_size_16_color_FFFFFF_t_70 1]: /images/20221123/a874b091358b47708dcae55603cad207.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxMzYxNTQ4MDczNw_size_16_color_FFFFFF_t_70 2]: /images/20221123/44854e06be964d9a95fd048fae769b33.png
[Vue Baidu Map]: https://dafrok.github.io/vue-baidu-map/#/zh/overlay/info-window
[Link 1]: https://download.csdn.net/download/z13615480737/12887528