VUE之使用百度地图API

深碍√TFBOYSˉ_ 2021-09-29 09:14 560阅读 0赞

利用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);
        }
      }

步骤六：将组件插入父组件中；

![1054769-20170613212612868-1025803133.png][]

转载于:https://www.cnblogs.com/microcosm/p/7003606.html

[1054769-20170613212612868-1025803133.png]: /images/20210725/2de2cab7faef4f1a8a865bbcfe9bf261.png

发表评论取消回复

表情：

评论列表（有 0 条评论，560人围观）

还没有评论，来说两句吧...

相关阅读

相关百度地图API使用记录

背景：最近需要开发一个使用到地图的网站，对百度地图API做了些研究，记录如下使用方法： 1.引入百度脚本 <span style="

逃离我推掉我的手/ 2022年08月05日 08:16/ 0 赞/ 370 阅读

相关如何使用百度地图API

首先你要先去百度地图开发者平台去注册一个开发者账号然后要获取AK密钥获取之后再HTML网页了引入就好了 <script src="http://api.map

你的名字/ 2022年06月11日 09:15/ 0 赞/ 390 阅读

相关 js 百度地图api

[百度地图JavaScript API][JavaScript API]是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支

拼搏现实的明天。/ 2022年06月10日 03:51/ 0 赞/ 392 阅读

相关百度地图API详解之地图坐标系统

博客原文地址：[http://www.jiazhengblog.com/blog/2011/07/02/289/][http_www.jiazhengblog.com_blog

系统管理员/ 2022年06月09日 02:07/ 0 赞/ 535 阅读

相关 js+百度地图API

js与百度地图API实例： <div id='address'></div> <script src="http://api.map.baidu.com/ap

旧城等待，/ 2022年04月16日 03:59/ 0 赞/ 448 阅读

相关 JAVA 百度地图 API

唉。。已经无力吐槽废话。。直接进入正题吧。。第一次写。。如有不足之处请谅解。。哦对了。。我们这个是 web 端获取 API 的官方文档：[http://lbsyun.ba

你的名字/ 2022年02月24日 12:58/ 0 赞/ 624 阅读

相关百度地图Javascript API使用详解

首先登录百度地图开发平台：[http://lbsyun.baidu.com/][http_lbsyun.baidu.com] ![watermark_type_ZmFuZ3p

客官°小女子只卖身不卖艺/ 2021年11月08日 16:20/ 0 赞/ 575 阅读

相关 VUE之使用百度地图API

利用vue创建点餐系统，在点餐系统中需要知道商家地址信息，这时就需要借用百度地图API。步骤一：申请百度地图密钥；步骤二：在index.htm

深碍√TFBOYSˉ_/ 2021年09月29日 09:14/ 0 赞/ 561 阅读

相关百度地图API 加载百度地图

前言百度地图在日常生活中应用的越来越多，功能也日渐丰富，我们可以使用ArcGIS JS API加载在线百度地图（[https://blog.csdn.net/i

布满荆棘的人生/ 2021年09月15日 02:50/ 0 赞/ 841 阅读

相关百度地图API的简单使用

jsdemo：[http://lbsyun.baidu.com/jsdemo.htm\a1\_2][http_lbsyun.baidu.com_jsdemo.htm_a1_2]

男娘i/ 2021年07月26日 12:27/ 0 赞/ 577 阅读