vue 百度地图自定义弹框样式
引入百度地图在index.html文件中引入百度地图申请百度密钥<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>在webpack.base.conf.js文件内添加 externals 选项无需再用impor...
·
-
引入百度地图
在index.html文件中引入百度地图 申请百度密钥
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js" ></script>
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'BMap': 'BMap',
'BMapLib': 'BMapLib'
},
output: {}
}
<template>
<!--地图容器-->
<div id="map_box"></div>
</template>
<script>
export default {
name:'',
data () {
return {
map: null,
infoBox: null,
}
},
mounted(){
this.showMap()
//动态添加的dom 调用vue事件
let _this = this
window.imageClick= function() {
_this.vueImageClick()
}
},
methods: {
/**
* 地图展示
*/
showMap() {
this.map = new BMap.Map('map_box')//对应地图容器id
let centerPoint = new BMap.Point(113.302114, 22.452695)
this.map.centerAndZoom(centerPoint, 15)
this.map.enableScrollWheelZoom(true)
this.map.enableDoubleClickZoom(true)
/*
//地图样式
this.map.setMapStyle({
styleJson: []
})*/
this.markerPoint()
},
/**
* 添加地图marker
*/
markerPoint() {
let _this = this
this.map.clearOverlays()
let iconImage = new BMap.Icon(require('../assets/icon/menuIcon.png'), new BMap.Size(24, 24))
let point = new BMap.Point(113.302114, 22.452695)
let marker = new BMap.Marker(point, { icon: iconImage }) // 创建标注
marker.addEventListener('click', () => {
//关闭其他标记点的弹框
if (_this.infoBox != null) {
_this.infoBox.close()
}
_this.markerPointClick(113.302114, 22.452695)
})
_this.map.addOverlay(marker)
},
/**
* 点击marker弹出信息框
*/
markerPointClick(lat, lng) {
let _this = this
let html = '<div class="infoBoxContent">\n' +
'<p οnclick="imageClick()">按钮</p>\n' +
'</div>'
let opts = {
boxStyle: {
width: '435px',
height: '233px'
// margin: '30px 0',
},
closeIconMargin: '25px 5px 0 0',
closeIconUrl: require('../assets/icon/close_btn.png'),
enableAutoPan: true,
align: INFOBOX_AT_TOP
}
this.infoBox = new BMapLib.InfoBox(this.map, html, opts)
/*this.infoBox._getCloseIcon = function() {
return ''
}*/
let point = new BMap.Point(lat, lng)
let marker = new BMap.Marker(point)
this.infoBox.open(marker)
},
vueImageClick(){
console.log('弹框中按钮的点击事件')
}
}
}
</script>
<style scoped>
#map_box{
width: 100%;
height: 650px;
}
</style>
<style>
/*自定义弹框样式--需要写在公共样式中才起作用*/
.infoBoxContent{
width: 435px;
height: 233px;
background-color: cyan;
}
</style>
更多推荐
已为社区贡献5条内容
所有评论(0)