1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 在Vue项目中调用百度地图API 过程

在Vue项目中调用百度地图API 过程

时间:2022-12-22 14:40:06

相关推荐

在Vue项目中调用百度地图API 过程

在Vue项目中调用百度地图API 过程

获得百度地图使用权

即在百度地图API中用百度账号申请成为开发者,获得ak密钥。

过程如下:

百度地图API

按照官方流程,一步一步,往下走

获得ak密钥之后在这可以查看:

在Vue项目中引入

终端执行:

npm install vue-baidu-map

找到main.js文件:

import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: '这里填你刚刚获得的ak密钥'})

在组件里就可以使用了

例如,组件:

<template><div><baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler"><!--缩放--><bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation><!--定位--><bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation><!--点--><bm-marker :position="map.center" :dragging="map.dragging" animation="BMAP_ANIMATION_DROP"><!--提示信息--><bm-info-window :show="map.show">云端锦医试点</bm-info-window></bm-marker></baidu-map></div></template><script>export default {name: "demo",data: () => ({map:{center: {lng: 115.929912,lat: 28.683191},zoom: 15,show: true,dragging: true},}),methods: {handler ({BMap, map}) {let me = this;console.log(BMap, map)// 鼠标缩放map.enableScrollWheelZoom(true);// 点击事件获取经纬度map.addEventListener('click', function (e) {console.log(e.point.lng, e.point.lat)})}}}</script><style scoped>.map {width: 100%;height: 600px;}</style>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。