网站开发好做还是平面好做,提出网站推广途径,那里有做网站的,建设领域信用系统网站Vue 集成 百度地图
1、获取百度地图 ak 密钥 2、登录网址 https://lbsyun.baidu.com/
3、注册百度地图开放平台账号#xff0c;填写认证信息#xff0c;并且创建应用
安装
npm install vue-baidu-map --savemain.js
import BaiduMap from vue-baidu-map;Vue.use(BaiduM…Vue 集成 百度地图
1、获取百度地图 ak 密钥 2、登录网址 https://lbsyun.baidu.com/
3、注册百度地图开放平台账号填写认证信息并且创建应用
安装
npm install vue-baidu-map --savemain.js
import BaiduMap from vue-baidu-map;Vue.use(BaiduMap, {ak: 你的AK 密钥,
});示例 注意 BaiduMap 组件容器本身是一个空的块级元素如果容器不定义高度百度地图将渲染在一个高度为 0 不可见的容器内。没有设置center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外因为百度地图会根据地名自动调整 zoom 的值。由于百度地图 JS API 只有 JSONP 一种加载方式因此 BaiduMap组件及其所有子组件的渲染只能是异步的。因此请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码不要试图在vue 自身的生命周期中调用 BMap 类更不要在这些时机修改 model 层。
入门 HelloWorld
templatediv baidu-map :centermapCenter :zoommapZoom classmap-container readyhandler/baidu-map/div
/templatescript
import { BaiduMap} from vue-baidu-map;
export default {name: HelloWorld,components: {BaiduMap,},data() {return {// 中心坐标mapCenter: { lng: 116.397428, lat: 39.90923 },// 缩放级别,1~19mapZoom: 13,BMap:null,map:null};},methods: {handler ({BMap, map}) {this.BMap BMap;this.map map;}}
}
/scriptstyle scoped.map-container{width: 100%;height: 600px;}
/style简单封装地图
地图组件
templatedivbaidu-map :centercenter :zoomzoom classmap-container/baidu-map/div
/templatescript
import { BaiduMap } from vue-baidu-map;
export default {components: {BaiduMap},props: {center: {type: String,required: true,},zoom: {type: Number,default: 13,},},data() {return {map: null,};}
}
/scriptstyle scoped
.map-container {width: 100%;height: 400px;
}
/style使用
templatedivel-rowel-col :span24el-rowel-col :span24el-card classbox-card shadowneverb-d-map :centermapCenter :zoommapZoom refbdMap/b-d-map/el-card/el-col/el-row/el-col/el-row/div
/template
script
import BDMap from /components/BDMap.vue;
export default {name: HomeIndex,components: {BDMap},data() {return {mapCenter: 合肥,mapZoom: 13,}}
}
/script
style scoped/style文档地址 相关示例及其他方法可在此处查询vue-baidu-map
