低价网站建设策划内容,浙江工程信息网,网站开发国外研究现状,微信小程序本地服务器搭建前情提要#xff1a;
本文vue采用vue3框架#xff0c;使用百度地图通过组件vue-baidu-map-3x#xff1a;
组件官网#xff1a;地图容器 | vue-baidu-map-3x
使用百度地图需要 申请百度地图AK秘钥
步骤#xff1a;1.进入百度地图开放平台 | 百度地图API SDK | 地图开…前情提要
本文vue采用vue3框架使用百度地图通过组件vue-baidu-map-3x
组件官网地图容器 | vue-baidu-map-3x
使用百度地图需要 申请百度地图AK秘钥
步骤1.进入百度地图开放平台 | 百度地图API SDK | 地图开发 2.打开顶部控制台 3.找到应用管理中-我的应用-创建应用
注意1.前端开发选择浏览器端2.必须配置白名单只有该白名单中的网站才能成功发起调用多个域名之间请用英文半角逗号隔开如果不想对任何域名做限制设置为英文半角星号*
vue3使用
安装 vue-baidu-map-3x
npm install vue-baidu-map-3x --save
全局注册 在main.ts/js 进行注册
import { createApp } from vue
import App from ./App.vue
import BaiduMap from vue-baidu-map-3xconst app createApp(App);app.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: 百度地图ak,// v:2.0, // 默认使用3.0// type: WebGL // ||API 默认API (使用此模式 BMapBMapGL)
});
app.mount(#app);
使用
templatediv classmapsbaidu-map classmap ak0yNijLKpCQV4tplf66hZ8sbWCTTrnZSH v3.0 typeAPI :center{ lng: 108.891651, lat: 34.229283 } :zoom50 scroll-wheel-zoombm-marker :position{ lng: 108.891651, lat: 34.229283 } :draggingfalse animationBMAP_ANIMATION_BOUNCEbm-label content我爱北京天安门 //bm-marker/baidu-map/div/template
script setup
import { BaiduMap } from vue-baidu-map-3x
/scriptstyle
.maps{width: 1200px;height: 100%;
}
.map {width: 100%;height: 300px;
}
/style
局部注册
局部注册的 BaiduMap 组件必须声明 ak,v,type 属性
templatebaidu-map classmap akBaiduMapAK v3.0 typeAPI :center{lng: 116.404, lat: 39.915} :zoom15/baidu-map
/templatescript setup
import { BaiduMap } from vue-baidu-map-3x
/scriptstyle
.map {width: 100%;height: 300px;
}
/style
常用配置项
ak //百度地图开发者平台申请的密钥仅在局部注册组件时声明
center //定位, 可使用如“广州市海珠区”的地区字符串也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度
zoom //缩放等级
min-zoom //最小缩放级别
man-zoom //最大缩放级别
dragging //允许拖拽
scroll-wheel-zoom //允许鼠标滚轮缩放
double-click-zoom //允许双击缩放其他具体使用配置请参考官网 vue-baidu-map-3x官网 使用
