百度地图自定义添加一个标注

1.引入百度地图js(需要去百度地图申请ak)

  <script type="text/javascript"src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥></script>

2.创建展示地图的样式

<style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            margin: 100px auto;
            height: 600px;
           width: 1000px;
        }
    </style>

3.创建展示地图的盒子

<div id="container"></div>

4.自定义标注代码

var map=new BMap.Map("container");
var point=new BMap.Point(自定义的经纬度);
map.centerAndZoom(point,15);
map.enableScrollWheelZoom();
var p=new BMap.Point(自定义的经纬度);
function addMarker(point){
var myIcon=new BMap.Icon("./img/mark.png",new BMap.Size(256,256),{
//BMap.Size类表示以指定的宽度和高度创建一个矩形区域大小,有的时候图标太大,Size太小,可能不能显示图标或显示一部分图标
  imageSize:new BMap.Size(25.6,25.6),//设置显示图像的大小,因为256*256太大,所以可以设置它实际显示的长宽比例为25.6*25.6,相当于缩小十倍了
  anchor:new BMap.Size(13,13),//标注指向的地理位置距离图标左上角各偏移13和25.6像素(一般宽度是照片宽的一般,长度是照片的长,这样图标的
//   尖角就能刚好点在坐标点上,否则是图标的中心点在坐标点上),本例中该位置即是图标中央下端的尖角位置
});
var marker=new BMap.Marker(point,{icon:myIcon});
map.addOverlay(marker);
}
addMarker(p);

点赞支持下谢谢🙂

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值