首页 > 建站教程 > 地图,GIS教程 >  如何修改高德地图点标注文本label标签样式正文

如何修改高德地图点标注文本label标签样式

高德地图使用方便,api接口写的非常清晰。今天,就来聊一聊高德地图的点标注文本label标签样式是怎么修改的。先来一段代码:
var map = new AMap.Map('container', {
    zoom:11,//级别
    center: [116.397428, 39.90923],//中心点坐标
    viewMode:'3D'//使用3D视图
});
// 创建一个 Marker 实例:
var marker = new AMap.Marker({
    position: new AMap.LngLat(116.397428, 39.90923),   // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
    offset: new AMap.Pixel(-10, -10),
    icon: 'image/gdmap_icon.png', // 添加 Icon 图标 URL
    title: '北京'
});

marker.setLabel({//label默认蓝框白底左上角显示,样式className为:amap-marker-label
    offset: new AMap.Pixel(-60, -25),//修改label相对于maker的位置
    content: "合肥市公安局高新区派出所"
});

// 将创建的点标记添加到已有的地图实例:
map.add(marker);
通过上面的代码,即可调用搞得地图,并且显示自定义的maker,同时显示一个label,但是label样式很难看,如下图:



其实,它是一个容器,加入到container里面,我们可以通过css来修改它:
#container .amap-marker-label{border:0 none; background-color: #fff; white-space: nowrap; box-shadow: 0 0 5px 0 rgba(0,0,0,.3); border-radius: 5px;}
#container .amap-marker-label:after{position: absolute; border:5px solid transparent; border-top-color: #fff; top:19px; left: 43%; content: ''; width: 0; height: 0;}
修改之后的效果如下: