zoukankan      html  css  js  c++  java
  • VUE之使用百度地图API

         利用vue创建点餐系统,在点餐系统中需要知道商家地址信息,这时就需要借用百度地图API。

        步骤一:申请百度地图密钥;

        步骤二:在index.html中添加百度地图JavaScript API接口;

      <script  type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KCzp8claYra8uYAvahElV9oKUT6j7Gx1" ></script>

        步骤三:在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级;

     externals: {
        "BMap": "BMap"
      }

        步骤四:在地图组件中import BMap,否则会出现"BMap undefined";

    import BMap from 'BMap';

        步骤五:创建地图对象,在mounted生命周期调用;

    mounted() {
          this.ready();
      },
      methods: {
        ready: function() {
          var map = new BMap.Map('allmap');
          var point = new BMap.Point(104.075796, 30.659684);
          map.centerAndZoom(point, 14);
          map.addControl(new BMap.MapTypeControl());
          map.enableScrollWheelZoom(true);
          map.enableDoubleClickZoom(true);
          var marker = new BMap.Marker(point);
          map.addOverlay(marker);
        }
      }

        步骤六:将组件插入父组件中;

                            

  • 相关阅读:
    C#中的WebBrowser控件的使用
    触发器
    SQL Server存储机制
    mongodb客户端操作常用命令
    动态居中方法
    关于node不需要重启即可刷新页面
    测试一个段落里面是否含有数字
    表单验证
    关于echarts和jquery的结合使用问题
    js函数获取ev对象
  • 原文地址:https://www.cnblogs.com/microcosm/p/7003606.html
Copyright © 2011-2022 走看看