其他分享
首页 > 其他分享> > vue实现百度离线地图

vue实现百度离线地图

作者:互联网

index.html中加载百度离线地图js

<!--    百度离线地图-->
<script type="text/javascript" src="/static/cdnnms/bmap/map_load.js"></script>
<script type="text/javascript" src="/static/cdnnms/bmap/bmap_offline_api_v3.0_min.js"></script>

vue使用离线地图样例
/************************** BaiduMapBg ***************************/
<template>
<div id="container" :style="bmapStyle" ></div>
</template>
<!--style="width: 1000px; height: 800px"-->
<!--:width ="bgWidth" :height="bgHeight"-->
<script>
// 百度地图api, http://lbsyun.baidu.com/index.php?title=jspopular/guide/show
// 百度地图javaScript api https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference.html#a0b0
let map
export default {
name: 'BaiduMapBg',
props: {
bgWidth: {
type: Number,
require: true
},
bgHeight: {
type: Number,
require: true
}
},
data () {
return {
// bmapStyle: {}
}
},
methods: {
// resize (width, height) {
// this.width = width
// this.height = height
// map.reset()
// },
drawMap () {
let options = {
enableAutoResize: false, // 是否自动适应地图容器变化,默认启用
enableMapClick: false // 是否开启底图可点功能,默认启用
}
map = new window.BMap.Map('container', options)

let point = new window.BMap.Point(116.404, 39.915) // 创建点坐标
map.centerAndZoom(point, 6) // 初始化地图,设置中心点坐标和地图级别
// 添加地图类型控件
map.addControl(new window.BMap.MapTypeControl({
mapTypes: [
window.BMAP_NORMAL_MAP,
window.BMAP_HYBRID_MAP
]
}))
// map.addControl(new window.BMap.NavigationControl())
map.setCurrentCity('北京') // 设置地图显示的城市 此项是必须设置的
// map.enableScrollWheelZoom(false) // 开启鼠标滚轮缩放 true
map.enableKeyboard() // 启用键盘操作
// 单击获取点击的经纬度
map.addEventListener('click', function (e) {
alert('经纬度: ' + e.point.lng + ',' + e.point.lat)
})
}
},
computed: {
bmapStyle () {
return { width: this.bgWidth + 'px', height: this.bgHeight + 'px', overflow: 'scroll' }
}
},
mounted () {
// this.bmapStyle = {width: this.width + 'px', height: this.height + 'px'}
// this.width = this.bgWidth
// this.height = this.bgHeight
this.$nextTick(() => {
this.drawMap()
})
}
}
</script>

<style scoped>
#container{
margin: 0px;
}
</style>

/************************************** map_load.js ********************************************/
let bmapcfg = {
'imgext' : '.jpg', //瓦片图的后缀 ------ 根据需要修改,一般是 .png .jpg
'tiles_dir' : '/static/cdnnms/bmap/tiles', //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目录
// 'tiles_dir' : 'tiles', //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目录
'tiles_hybrid': '', //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目录
'tiles_self' : '' //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
};

//////////////////下面的保持不动///////////////////////////////////
var scripts = document.getElementsByTagName("script");
var JS__FILE__ = scripts[scripts.length - 1].getAttribute("src"); //获得当前js文件路径
bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf("/")+1); //地图API主目录

//bmapcfg.home = 'static/cdnnms/bmap/';

(function(){
window.BMap_loadScriptTime = (new Date).getTime();
//console.log(bmapcfg.home);
// //加载地图API主文件
// document.write('<script type="text/javascript" src='+bmapcfg.home+'bmap_offline_api_v3.0_min.js></script>');
// //加载扩展函数
// document.write('<script type="text/javascript" src='+bmapcfg.home+'map_plus.js></script>');
// //加载城市坐标
// document.write('<script type="text/javascript" src='+bmapcfg.home+'map_city.js></script>');


})();
///////////////////////////////////////////////////////////////////

标签:map,tiles,vue,地图,离线,height,width,window,百度
来源: https://www.cnblogs.com/wsb20200618/p/14971208.html