Other/其他

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

阿里云

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

  1. <script type="text/javascript"src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥></script>
也想出现在这里?联系我们
创客主机

2.创建展示地图的样式

  1. <style type="text/css">
  2.         HTML {
  3.             height: 100%
  4.         }
  5.  
  6.         body {
  7.             height: 100%;
  8.             margin: 0px;
  9.             padding: 0px
  10.         }
  11.  
  12.         #container {
  13.             margin: 100px auto;
  14.             height: 600px;
  15.            width: 1000px;
  16.         }
  17.     </style>

3.创建展示地图的盒子

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

4.自定义标注代码

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

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

已有 215 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!