码迷,mamicode.com
首页 > Windows程序 > 详细

VUE之使用百度地图API

时间:2017-06-13 22:41:20      阅读:4122      评论:0      收藏:0      [点我收藏+]

标签:pac   ges   and   vue   zoom   生命周期   ddc   text   function   

     利用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(new BMap.Point(104.047404, 30.696035), 14);
      map.addControl(new BMap.MapTypeControl());
      map.setCurrentCity(‘小龙坎火锅‘);
      map.enableScrollWheelZoom(true);
      map.enableDoubleClickZoom(true);
      var marker = new BMap.Marker(point);
      map.addOverlay(marker);
    }
  }

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

                        技术分享

VUE之使用百度地图API

标签:pac   ges   and   vue   zoom   生命周期   ddc   text   function   

原文地址:http://www.cnblogs.com/microcosm/p/7003606.html

(2)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!