标注层级(setTop)
需求
在vue项目中使用原生的百度JavaScript API v3.0。
技术点
官网地址:JavaScript API - 添加控件 | 百度地图API SDK
开发文档:百度地图JSAPI 3.0类参考
实现
第一步:在public的index.html中引入
<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>
第二步:组件中使用
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
point: null
};
},
mounted() {
this.map = new BMap.Map("map");
this.point = new BMap.Point(116.404, 39.915)
this.map.centerAndZoom(this.point, 17);
this.map.enableScrollWheelZoom();
// 添加marker点
var marker = new BMap.Marker(this.point);
this.map.addOverlay(marker);
// marker点鼠标事件
marker.addEventListener("mouseover", function(e){
e.currentTarget.setTop(true); // 坐标层级
})
},
}
</script>
<style lang="less">
#map {
width: 300px;
height: 300px;
}
</style>
解析
marker点添加鼠标事件,设置层级。
marker.addEventListener("mouseover", function(e){
e.currentTarget.setTop(true); // 坐标层级
})