Vue的百度地图插件尝试使用_vue引入百度地图资源-CSDN文库

186 浏览量 2020-08-29 12:09:30 上传评论收藏 172KB PDF 举报

Vue 百度地图插件尝试使用本文主要介绍了 Vue 的百度地图插件尝试使用，包括插件的安装、引入、地图视图的渲染、控件的添加等。下面是详细的知识点：一、插件的安装在使用 Vue 的百度地图插件之前，我们需要安装该插件。我们可以通过 CDN 全局安装该插件，代码如下： `<script src="https://unpkg.com/vue-baidu-map"></script>` 二、插件的引入在安装好插件后，我们需要在 Vue 项目中引入该插件。我们可以使用 `Vue.use()` 方法来引入该插件，代码如下： `Vue.use(VueBaiduMap.default, { ak: 'YOUR_APP_KEY',})` 其中，`ak` 是在百度地图开发者平台申请的密钥。三、地图视图的渲染在引入插件后，我们可以使用 `BmView` 组件来渲染百度地图实例的可视化区域。代码如下： `<template id="baidu"> <baidu-map class="map"> <bm-view style="position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px"></bm-view> </baidu-map></template>` 四、控件的添加除了渲染地图视图外，我们还可以添加控件来丰富地图的功能。例如，我们可以添加一个缩放控件，代码如下： `<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>` 五、完整代码以下是完整的代码： `<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>baidumap</title> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue-baidu-map"></script> <style> #map{ width: 1000px; height: 500px; } </style></head><body> <div id="map"> <baidu></baidu> </div> <template id="baidu"> <baidu-map class="map"> <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> <bm-view style="position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px"></bm-view> </baidu-map> </template> <script> Vue.use(VueBaiduMap.default, { ak: 'YOUR_APP_KEY', }) Vue.component("baidu",{ template:'#baidu' }) new Vue({ el:'#map' }) </script></body></html>` 本文主要介绍了 Vue 的百度地图插件尝试使用，包括插件的安装、引入、地图视图的渲染、控件的添加等。希望这篇文章能够对大家的学习有所帮助。

资源推荐

资源评论