如何修改高德地图点标注文本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;}

修改之后的效果如下：




部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！