vue引入百度地图插件

最新推荐文章于 2024-09-23 17:27:56 发布

原创

最新推荐文章于 2024-09-23 17:27:56 发布 · 565 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何在Vue项目中使用vue-cli脚手架安装和全局引入vue-baidu-map插件。通过在main.js中设置密钥ak，实现百度地图功能。接着，文章展示了HTML、CSS和JS的使用示例，最终呈现了插件的应用效果。

vue-cli脚手架安装
npm i --save vue-baidu-map

main.js全局引入
import BaiduMap from ‘vue-baidu-map’
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apiconsole/key */
ak: ‘aaa’
})

html

<div>
					<baidu-map v-bind:style="mapStyle" class="bm-view" ak="你的百度地图ak" :center="center" :zoom="zoom"
						:scroll-wheel-zoom="true" @click="getClickInfo" @moving="syncCenterAndZoom"
						@moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
						<bm-view style="width: 100%; height:500px;"></bm-view>
						<bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true"
							animation="BMAP_ANIMATION_BOUNCE">
						</bm-marker>
						<bm-control :offset="{width: '10px', height: '10px'}">
							<!-- <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
								<input type="text" placeholder="请输入搜索关键字" class="serachinput">
							</b

标签