百度地图引用设置个性化
百度 设置 引用 地图 个性化
2023-09-14 09:06:32 时间
export const TDIMap = { init() { return new Promise((resolve, reject) => { // 如果已加载直接返回 if (window.T) { console.log('天地图脚本初始化成功...') resolve(window.T) reject('error') } }) } } export const BaiduMap = { init: function () { // const BMapURL = 'http://api.map.baidu.com/api?v=3.0&ak=yr0FTvMYAK8tpkRjILGk7TihbmCfoeC1&callback=bMapInit' //ak 换成自己的-张 const BMapURL = 'http://api.map.baidu.com/api?v=3.0&ak=RCLnpXmnZ8D62t5KMs9KLE44peKCH2ss&callback=bMapInit' return new Promise((resolve, reject) => { // 如果已加载直接返回 if (typeof BMap !== 'undefined') { resolve(BMap) return true } // 百度地图异步加载回调处理 window.bMapInit = function () { console.log('百度地图脚本初始化成功...') resolve(BMap) }; // 插入script脚本 let scriptNode = document.createElement('script') scriptNode.setAttribute('type', 'text/javascript') scriptNode.setAttribute('src', BMapURL) document.body.appendChild(scriptNode) }) } }
<template> <div class="mapContainer"> <!-- <div id="tMap" /> --> <div id="tMap" ref="tMap" /> </div> </template> <script> import { TDIMap, BaiduMap } from "@/utils/map.js"; var $tdMap = null; export default { name: "TdMap", props: {}, data() { return { lat: 30.26654870969591, lng: 120.08263786397654, mapLevel: 18, }; }, mounted() { // this.initMap() this.initBaiDu(); }, methods: { initBaiDu() { const _this = this; BaiduMap.init().then((BMap) => { _this.map = new BMap.Map(_this.$refs.tMap); _this.map.centerAndZoom( new BMap.Point(_this.lng, _this.lat), _this.mapLevel ); _this.map.addControl( new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], //图层类型+混合 // mapTypes: [BMAP_NORMAL_MAP], //图层类型 // anchor: BMAP_ANCHOR_TOP_LEFT, //切换按钮位置 }) ); _this.map.enableScrollWheelZoom(); //地图个性化 _this.map.setMapStyleV2({ styleId: "2ab34170567eb610404d09569833f505", }); }); }, }, }; </script> <style lang="scss" scoped> .mapContainer { width: 100%; z-index: 4; height: 100%; } #tMap { width: 100%; height: 100%; } </style>
相关文章
- Yoco百度文库下载器v0.1.1单文件-星泽V社
- 元宇宙一周报:鱿物数字藏品平台上线,鲸探、百度智能云、支付宝将元宇宙搬进文博领域
- WordPress给网站右侧边栏添加百度一下协助SEO优化(以子比主题为例)[WP教程]
- 谷歌浏览器设置地址栏默认搜索为百度搜索
- 百度翻译api调试
- Python调用百度API实现图像识别
- Python FastApi集成百度地图并反显到地图
- 百度终于要出手了?
- 百度地图鼠标点击或者移动获取坐标经纬度详解编程语言
- 云Linux视频分享:百度云一步到位(linux视频百度)
- 云部署 MongoDB 就在百度云(mongodb百度)
- 百度出品Redis操作指南(百度 redis操作手册)
- 百度升级智慧城市解决方案,已落地苏州、慈溪多个地区
- 解析百度搜索结果link?url=参数分析(全)
- JS仿百度搜索自动提示框匹配查询功能