笔记:vue项目中引入百度地图

首先在build下面的 webpack.base.conf.js 中和 entry 平级增加一个 externals 对象.

webpack.base.conf.js 

注意修改了build中的文件后需要重新npm run dev.

在单页中展示地图,先给地图容器一个宽高,定义一个id

在mounted时期(可以访问DOM)调用api,我的地图需要的坐标 是后端接口返回给我的数据,


map.vue

对了,最重要的事,百度地图需要ak,我是自己注册的百度账号,在百度地图开放平台 | 百度地图API SDK | 地图开发登陆百度账号,点击控制台自己创建应用你会得到一个ak,具体步骤网上随便一搜很多。

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

将上述代码引入你的index.html中。

然后我打包发给我的后端部署上线之后出现问题:地图不显示,报错'BMap undefined'

后来发现原来他也需要在他那边的index.html中引入

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

然后问题就解决了。虽然可能不是最优方案,至少显示地图了,开心。而且我这需求也低,只是地图的展示。效果如下:


最终效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容