learning_record_doc/front_end/vue/vue引入百度地图.md

vue引入百度地图

• 首先安装百度地图依赖

  npm install vue-baidu-map --save
  

• 申请百度地图开放平台百度地图密钥

  • （申请链接http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey）根据网站提示填写应用信息。
  • 在应用类型出选择浏览器端
  • ip白名单填写*号

• 在main.js中全局注册

  import Vue from 'vue'
  //添加百度地图
  import BaiduMap from 'vue-baidu-map'
  Vue.use(BaiduMap,{
    ak:'GHYWGm6cKODTU3BzuKDlEqARxc2ZEf3c'
  })
  

• 如果使用的是quasar-cli

  • 在src/boot 下创建启动文件baiduMap.js 添加以下内容

    import Vue from 'vue'
    //添加百度地图
    import BaiduMap from 'vue-baidu-map'
    Vue.use(BaiduMap,{
      ak:'你申请的百度地图开放平台应用key'
    })
    

  • 在quasar.conf.js文件中添加你的启动文件

    boot: [
        'i18n',
        'axios',
        'baiduMap'
    ]
    

• 页面

  <template>
    <baidu-map
      :center="center"
      :zoom="zoom"
      @ready="handler"
      style="height: 1080px"
      @click="getClickInfo"
      :scroll-wheel-zoom="true"
    >
    </baidu-map>
  </template>
  <script>
  export default {
    name: "TestBaiDu",
    data() {
      return {
        center: { lng: 109.45744048529967, lat: 36.49771311230842 },
        zoom: 13
      };
    },
    methods: {
      handler({ BMap, map }) {
        var point = new BMap.Point(109.49926175379778, 36.60449676862417);
        map.centerAndZoom(point, 13);
        var marker = new BMap.Marker(point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        var circle = new BMap.Circle(point, 6, {
          strokeColor: "Red",
          strokeWeight: 6,
          strokeOpacity: 1,
          Color: "Red",
          fillColor: "#f03",
        });
        map.addOverlay(circle);
        var opts = {
            width: 50, // 信息窗口宽度
            height: 10, // 信息窗口高度
            title: "北京", // 信息窗口标题
        };
        var infoWindow = new BMap.InfoWindow("三里屯", opts); // 创建信息窗口对象
        map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
      },
      getClickInfo(e) {
        console.log(e.point.lng);
      console.log(e.point.lat);
        this.center.lng = e.point.lng;
        this.center.lat = e.point.lat;
      }
    }
  };