VUE之使用百度地图API

深碍√TFBOYSˉ_ 2021-09-29 09:14 581阅读 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 条评论，581人围观）

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

相关阅读

相关百度地图API的使用——网页中写入百度地图

我们时常在旅行网站、商城网站等都会有一个定位功能和地图出现！那么我们应该要怎样实现这个功能呢？我们自己去实现一个地图，怎样的解决方式显然是不正确的。往往我们都是通过调用成熟的百

红太狼/ 2024年02月17日 15:44/ 0 赞/ 32 阅读

相关 Vue中使用百度地图

首先，看看[官方文档][Link 1]，然后投入使用，先看效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

心已赠人/ 2023年05月22日 04:57/ 0 赞/ 22 阅读

相关百度地图API使用记录

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

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

相关如何使用百度地图API

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

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

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

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

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

相关 vue使用百度地图api（原生js同样适用）

> 在之前的一个小项目中，用到的显示当地的地图功能，因为之前有了解过百度地图的开放平台，所以选择了百度地图作为的api作为示例，高德地图也类似。此文以百度为例，讲讲如何在vue

不念不忘少年蓝@/ 2022年01月22日 01:03/ 0 赞/ 382 阅读

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

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

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

相关 VUE之使用百度地图API

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

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

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

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

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

相关百度地图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 赞/ 610 阅读