网页端调用百度地图，自定义标注图标方法

最新推荐文章于 2024-03-01 16:54:03 发布

phubing

最新推荐文章于 2024-03-01 16:54:03 发布

阅读量1.6k

点赞数 2

分类专栏：前端+ 文章标签： JS 百度地图 HTML

本文链接：https://blog.csdn.net/qq_26975307/article/details/96423410

版权

前端+ 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

最近做网页端地图导航的时候，需要用到自定义标注，这里记录一下（大牛轻喷）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <title定义标注图标方法1</title>
    <style>
        html,body,#allmap{
            height: 100%;
            width: 100%;
            overflow:hidden;
            margin:0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script>
</head>
<body>
    <div id="allmap"></div>
    <script>
        /*实现方法：
        （1）通过参数MarkerOptions的icon属性进行设置；
        （2）使用Marker.setIcon()方法
        */

        var map = new BMap.Map("allmap");//创建一个地图
        var point = new BMap.Point(116.404, 39.915);//创建一个地理点坐标
        map.centerAndZoom(point,12);

        //构造函数：IconMarker(point: Point, opts: MarkerOptions)    创建一个图像标注实例。
        //MarkerOptions类表示Marker构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

        var mk = new BMap.Marker(point,{title:"标注提示语句"});//创建标注

        /*Icon类表示标注覆盖物所使用的图标。
        *构造函数：Icon(url: String, size: Size, opts: IconOptions)  以给定的图像地址和大小创建图标对象实例
        *属性：
        *anchor:Size 图标的定位点相对于图标左上角的偏移值。【此功能相当于定位中的left和top属性】
        *size:Size   图标可视区域的大小。(图标是作为span标签的背景图片添加上去的，打开控制台自行查看)
        *imageSize:Size   图标所用的图片的大小。此功能的作用等同于CSS中的background-size属性。
        *imageOffset:Size 图标所用的图片相对于可视区域的偏移值。【此做法与css sprites技术类似。】
        *                 此功能，相当于CSS中的background-position属性。
        *imageUrl:String 图标所用图像资源的位置。
        */

        /*IconOptions表示Icon构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。
        *anchor:Size 图标的定位锚点。是相对于图标左上角的偏移值。默认等于图标宽度和高度的中间值。【指定标注的位置】
        *imageOffset:Size 图片相对于可视区域的偏移值。【当您需要从一幅较大的图片中截取某部分作为标注图标时使用】
        */

        /*Size类以像素表示一个矩形区域的大小。
        *构造函数：Size(width: Number, height: Number)   以指定的宽度和高度创建一个矩形区域大小对象   
         */

        // var icon = new BMap.Icon('location.ico',new BMap.Size(32,32));
        //var icon = new BMap.Icon('location.png',new BMap.Size(20,27));
        /*设置的是span元素的大小，即图片区域的大小，并非图片本身的大小*/

        //icon.imageSize = new BMap.Size(20,27);//设置span元素背景图片的真实大小，即图片本身的大小
        //icon.anchor = new BMap.Size(10,20);//设置span元素的偏移，即整个图片区域的偏移量，相当于设置left，top属性

        /*图片路径自己指定*/
        var icon = new BMap.Icon('node_position.png',new BMap.Size(30,30));
        icon.imageSize = new BMap.Size(30,30);
        icon.anchor = new BMap.Size(15,25);
        mk.setIcon(icon); 
        map.addOverlay(mk);//将标注添加到地图中

    </script>
</body>
</html>