百度地图API 您所在的位置:网站首页 地图图片标注怎么做 百度地图API

百度地图API

2024-07-12 00:25| 来源: 网络整理| 查看: 265

查询了很多资料,也设想过很多方案(比如让之前的标注隐藏或者删除,再显示新的标注),没有一个较为合理的实现方案。经过不懈的寻找,终于找到了一种方法,成功实现了ico图片标注的平移。记录一下,后续再用到时可提醒自己。现介绍如下:

要实现的功能如上所说:实现ico图片标注在地图上的平移。可以使用此功能来做轨迹移动,沿线移动等功能。主要的代码是在百度地图API官网的demo里面找到的。链接:http://lbsyun.baidu.com/jsdemo.htm#c2_5。可以参照这个链接里面的代码进行实现。

我使用的是3.0版本的API,可能由于版本不同,我直接套用这段代码并没有实现。因此进行了一个小的修改。

demo网站的部分代码如下,我选取了主要的实现代码,并进行了部分的注释。

var myIcon = new BMap.Icon("/jsdemo/img/Mario.png", new BMap.Size(32, 70), {//图片格式 //offset: new BMap.Size(0, -5), //相当于CSS精灵 imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。 }); var carMk = new BMap.Marker(pts[0],{icon:myIcon}); map.addOverlay(carMk); function resetMkPoint(i){ carMk.setPosition(pts[i]);//pts为坐标的数组,也可以使用var pt = new BMap.Point(lng, lat); if(i < paths){//var paths = pts.length; 获得有几个点 setTimeout(function(){//延时函数 i++; resetMkPoint(i); },100); } }

如果要直接使用,可不用新建function,直接使用carMk.setPosition(pts[i])即可,这也是本段代码的核心。在我的版本里,我还需要在这句话后面再加上map.addOverlay(carMk)才可以实现,也就是这句话要伴随着ico图片标注的移动一次而出现一次。最终,我的实现代码如下。

var pointIni = new BMap.Point(87.100, 42.200);//初始化一个图片标注的坐标 var PlaneMarker = new BMap.Marker(pointIni,{icon:new BMap.Icon("plane_24px.ico", new BMap.Size(24,24),{anchor: new BMap.Size(2, 3)})}); //偏移 map.addOverlay(PlaneMarker);//添加一个图片标注 function Move_Point(x,y) { var pt = new BMap.Point(x, y); PlaneMarker.setPosition(pt); map.addOverlay(PlaneMarker); }

这样我就能够完美的实现我设想的功能。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有