博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
VUE之使用百度地图API
阅读量:6614 次
发布时间:2019-06-24

本文共 761 字,大约阅读时间需要 2 分钟。

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

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

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

    步骤三:在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);    }  }

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

                        

转载于:https://www.cnblogs.com/Tohold/p/9761781.html

你可能感兴趣的文章
ansible模块批量管理
查看>>
RHEL/Centos7新功能
查看>>
Planner .NET日历日程控件能给你的应用程序提供多种日历日程功能
查看>>
svs 在创建的时候 上传文件夹 bin obj 这些不要提交
查看>>
细说浏览器特性检测(1)-jQuery1.4添加部分
查看>>
Java基础-算术运算符(Arithmetic Operators)
查看>>
C#编程(四十七)----------集合接口和类型
查看>>
【转】关于大型网站技术演进的思考(十二)--网站静态化处理—缓存(4)
查看>>
积跬步,聚小流------Bootstrap学习记录(1)
查看>>
Android官方架构组件LiveData: 观察者模式领域二三事
查看>>
vmware workstation14永久激活密钥分享
查看>>
iOS 多线程 之 GCD(大中枢派发)(一)
查看>>
Myeclipse中打开接口实现类的快捷键
查看>>
使用JdbcTemplate和JdbcDaoSupport
查看>>
Glibc 和 uClibc
查看>>
Mysql学习第三课-分析二进制日志进行增量备份和还原
查看>>
HDU 6073 - Matching In Multiplication | 2017 Multi-University Training Contest 4
查看>>
如何检测域名是否被微信屏蔽 微信域名检测接口API是如何实现
查看>>
POJ1611-The Suspects
查看>>
Linux下安装Python-3.3.2【转】
查看>>