百度地图如何添加图标

百度地图添加图标的方法下面是通用的就不说了

  var map = new BMap.Map("allmap", { minZoom: 12, maxZoom: 18 }); // 创建Map实例,设置地图允许的最小/大级别
    var point = new BMap.Point(113.988696,22.979988);
    map.centerAndZoom(point, 18);

然后图标

 var myIcon = new BMap.Icon("basic/images/us_mk_icon.png", new BMap.Size(30,30));

接着定义

var marker = new BMap.Marker(point,{icon:myIcon});

然后把图标输入百度地图

 map.addOverlay(marker);

好了就行了!

image.png

或者我们还可以加个信息窗口

 var opts = {
        width: 200, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: "信息窗口", // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
    }
        var infoWindow = new BMap.InfoWindow("电话什么东西之类的", opts); // 创建信息窗口对象 
    map.openInfoWindow(infoWindow, point); //开启信息窗口
    
        map.enableScrollWheelZoom(true); //是否允许缩放

好了可以了!试下吧!

完整代码示例

   <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=5fRUbGCLuEa5MyCyDhWZOsgq6ySAymoN"></script>
    <script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap", { minZoom: 12, maxZoom: 18 }); // 创建Map实例,设置地图允许的最小/大级别
    var point = new BMap.Point(112.944332,28.357452);
    var points = new BMap.Point(112.943827,28.357088);//设置自定义图片的坐标
    
    map.centerAndZoom(point, 18);
    var myIcon = new BMap.Icon("/basic/images/maptb.png", new BMap.Size(60,90));//设置自定义图片
    var marker = new BMap.Marker(points,{icon:myIcon}); // 创建标注
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    map.addOverlay(marker);  
    var opts = {
        title: "健康兔板材", // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
    }
   var infoWindow = new BMap.InfoWindow("健康兔板材"); // 创建信息窗口对象 
   map.disableScrollWheelZoom();//禁止缩放
   map.openInfoWindow(infoWindow, point); //开启信息窗口
   marker.addEventListener("click", function(){          
       map.openInfoWindow(infoWindow, point); //开启信息窗口
})
    </script>

image.png

相关内容

发表评论

验证码:
点击我更换图片

最新评论