百度地图根据类别不同做不同的标注

Posted 2021-06-06 笑天

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图根据类别不同做不同的标注相关的知识，希望对你有一定的参考价值。

一、百度地图准备

https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey

二、根据类别不同做不同的标注（设置覆盖物，即自己准备的图片）

通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，您也可以使用marker.setIcon()方法。

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);  // 编写自定义函数，创建标注   
function addMarker(point, index){  // 创建图标对象   
    var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {    
        // 指定定位位置。   
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
        // 图标中央下端的尖角位置。    
        anchor: new BMap.Size(10, 25),    
        // 设置图片偏移。   
        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
        // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
        imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
    });      
    // 创建标注对象并添加到地图   
    var marker = new BMap.Marker(point, {icon: myIcon});    
    map.addOverlay(marker);    
}    
// 随机向地图添加10个标注    
var bounds = map.getBounds();    
var lngSpan = bounds.maxX - bounds.minX;    
var latSpan = bounds.maxY - bounds.minY;    
for (var i = 0; i < 10; i ++) {    
    var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),    
                                  bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));    
    addMarker(point, i);    
}

三、完整代码及效果

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body,
            html,
            #allmap {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                font-family: "微软雅黑";
            }
            h2{
                font-family:隶书;
                font-size: 18;
            }
        </style>

        <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=1CP82D4yZqwEXmsuje96jrxfKWTInh0I&services=&t=20170517145936"></script>
        <title>地图展示</title>
    </head>
    <body>
        <div id="allmap" ></div>
    </body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap"); // 创建Map实例

    map.centerAndZoom(new BMap.Point(115.909, 28.6757), 6); // 初始化地图,设置中心点坐标和地图级别

    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));
    
    map.setCurrentCity("江西"); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    
    
        // 编写自定义函数,创建标注
        function addMarker(point,index,img){
            img = \'img/\'+img+\'.png\'
            var myIcon = new BMap.Icon(img, new BMap.Size(16, 16), {    
                    // 指定定位位置。   
                    // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
                    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
                    // 图标中央下端的尖角位置。    
                    anchor: new BMap.Size(16 ,16),    
                    // 设置图片偏移。   
                    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
                    // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
                   // imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
                });     
            var marker = new BMap.Marker(point, {icon: myIcon}); 
            
            marker.addEventListener(\'click\', function (e) {
                    // 通过点击的坐标创建一个点对象，添加标签
                    var point = new BMap.Point(e.point.lng, e.point.lat);
                    var opts = {
                        enableMessage: false,
                    }
                    
                    var infowindow = new BMap.InfoWindow("<p style=\'font-family:隶书;font-size: 24;\'>草履蚧雄成虫:分布于灌南；徐州：<br>云龙区、鼓楼区、泉山区..<a href=\'#\'>详情<a></p><img src=\'./img/000215.png\' style=\'height: 200px;\'>" , opts);
                    map.openInfoWindow(infowindow, point);
            });
            
            map.addOverlay(marker);
          
        }
        // 随机向地图添加25个标注
        var bounds = map.getBounds();
        var sw = bounds.getSouthWest();
        var ne = bounds.getNorthEast();
        var lngSpan = Math.abs(sw.lng - ne.lng);
        var latSpan = Math.abs(ne.lat - sw.lat);
        for (var i = 0; i < 5; i ++) {
            var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
            addMarker(point,i,\'lan\');
        }
        
        for (var i = 0; i < 5; i ++) {
            var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
            addMarker(point,i,\'fen\');
        }
        
        for (var i = 0; i < 5; i ++) {
            var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
            addMarker(point,i,\'huang\');
        }
        
        for (var i = 0; i < 5; i ++) {
            var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
            addMarker(point,i,\'hong\');
        }
        
        for (var i = 0; i < 5; i ++) {
            var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
            addMarker(point,i,\'lv\');
        }
    
    
</script>

以上是关于百度地图根据类别不同做不同的标注的主要内容，如果未能解决你的问题，请参考以下文章

百度地图标注，哪位高手指教一下，下图这种地图标注怎么做出来的？急，急，急!

百度地图标注及结合ECharts图谱数据可视化

百度地图API,在地图上添加了一个标注,怎么才能让这个标注随着地图缩放而缩放呢?

百度地图API一：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图

百度地图标注位置怎么弄？

如何在百度地图API 中标注自己的地点啊？