700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 百度地图API : 自定义标注图标

百度地图API : 自定义标注图标

时间:2019-08-09 02:16:56

相关推荐

百度地图API :  自定义标注图标

通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptionsicon属性进行设置,

也可以使用marker.setIcon()方法。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body,html,#allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑";}</style><script type="text/javascript"src="https://api./api?v=2.0&ak=LaQ2jfcObK42sDixAN2BraP2jbGMU6BC"></script><script src="/jquery/2.0.0/jquery.min.js"></script><title>GPS转百度</title></head><body><div id="allmap"></div></body></html><script type="text/javascript">// 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例var ggpoint = new BMap.Point(129.879392, 32.790481)map.centerAndZoom(ggpoint, 16); // 初始化地图,设置中心点坐标和地图级别map.addControl(new BMap.MapTypeControl()); //添加地图类型控件map.setCurrentCity("长崎");// 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放var points = [[123.319727767605, 41.4229349260951],[125.725967756961, 39.0269627713093],[126.97604837, 37.559805362172],[126.995866800926, 37.5646576789431],[127.717276492584, 37.8846597149346],[127.845636602218, 36.5247159814598],[129.881057104894, 32.7479331075868],[129.877945175468, 32.7441603140361],[129.823280322228, 32.8551075968325],[129.996944752118, 33.439129860535],[129.857128998386, 33.2587933885413],[129.78871431, 33.7842305297287],[130.241407289985, 32.7843329855946],];// // 坐标转换完之后的回调函数translateCallback = function (data) {if (data.status === 0) {// 向地图添加标注for (var i = 0; i < points.length; i++) {var myIcon = new BMap.Icon("//10/21/hQeUEjzTaZv63uB.png", new BMap.Size(23, 35));var point = new BMap.Point(points[i][0], points[i][1]);// 创建标注对象并添加到地图 var marker = new BMap.Marker(point, {icon: myIcon });map.addOverlay(marker);};map.addOverlay(marker); // 将标注添加到地图中var label = new BMap.Label("您现在的位置", {offset: new BMap.Size(20, -10) });marker.setLabel(label); //添加百度labelmap.setCenter(data.points[0]);}}setTimeout(function () {var convertor = new BMap.Convertor();var pointArr = [];pointArr.push(ggpoint);convertor.translate(pointArr, 1, 5, translateCallback)}, 1000)// 地图的点击事件map.addEventListener('click', function (e) {console.log('点击位置经纬度:' + e.point.lng + ',' + e.point.lat);});</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。