web实现地图画标识物

第一步先实现画路线：

集成第三方的百度地图：

第一初始化地图：

initMap : function(gatherList) {points = [];map = null;lushu = null;_gatherList = null;zoom_jb = null;markers = [];end_markers = [];overlays = null;condition = 0;zoom = null;begin_num = 0;tag = 0;preGather = null;prePoint = null;sumDistance = 0;center_point = null;temp_last_update_time = null;map = new BMap.Map("map_warp");map.centerAndZoom("中国", 5);map.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl());map.enableScrollWheelZoom(true);if(null != gatherList && gatherList.length >= 1){zjxlMap.loadGatherData(gatherList);}}

第二步：

加载数据

loadGatherData : function(gatherList) {if(null != gatherList && gatherList.length >= 1){gatherList.reverse();_gatherList = gatherList;zjxlMap.loadMapOverlays(gatherList,condition, 10);} else {map.centerAndZoom("中国", 5);}}

第三步：

根据数据画标识物：

loadMapOverlays : function(gatherList,condition,zoom,radioControl) {if (gatherList == null || gatherList.length <= 0) {return;}points = [];markers = [];var gatherListLen = gatherList.length;var isUseI = 0;if(!radioControl){isUseI = begin_num;}for (var i = isUseI; i < gatherListLen; i++) {var gather = gatherList[i];if (lwzh.isNullOrEmpty(gather.bd_xpoint) || gather.bd_xpoint == "0.0") {continue;}if (lwzh.isNullOrEmpty(gather.bd_ypoint) || gather.bd_ypoint == "0.0") {continue;}//处理速度var speed_str = gather.speed;gather.speed_str = (speed_str == null || speed_str == "" ? 'N/A' : speed_str + 'km/h');gather.gather_time_str = zjxlMap.translateDate(gather.gather_time);//处理里程var point = new BMap.Point(gather.bd_xpoint,gather.bd_ypoint);point.gatherDatas = [ gather ];if (i == 0) {// 画起点var myIcon = new BMap.Icon("/static/images/bdmap/icon_st.png", new BMap.Size(30,36),{anchor:new BMap.Size(15,36)});var html = template("pointContentTemplate", {point : point});map.centerAndZoom(point, 15);var marker = new BMap.Marker(point,{icon:myIcon});map.addOverlay(marker);zjxlMap.addClickHandler(html,marker);}if (i == gatherListLen - 1) {zjxlMap.hide(end_markers);preGather = gather;// 画终点var myIcon = new BMap.Icon("/static/images/bdmap/icon_en.png", new BMap.Size(30,36),{anchor:new BMap.Size(14,36)});var marker = new BMap.Marker(point,{icon:myIcon});end_markers.push(marker);map.addOverlay(marker);}if (prePoint) {// 画箭头var html = template("pointContentTemplate", {point : point});var direction_angle = gather.direction_angle;var marker = new BMap.Marker(point);markers.push(marker);map.addOverlay(marker);zjxlMap.addClickHandler(html,marker);// 画路线if (0) {} else {var polyline = new BMap.Polyline([ prePoint, point ], {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5});map.addOverlay(polyline);}}prePoint = point;points.push(point);}}

路线画出来后，想在标识物上加上一个点击事件：

代码实现：

addClickHandler : function(content,marker) {marker.addEventListener("click",function(e){zjxlMap.openInfo(content,e)});},
openInfo : function(content,e) {var p = e.target;var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象 map.openInfoWindow(infoWindow,point); //开启信息窗口}

点击事件的出现和隐藏：

hide:function(markers){if(markers.length == 0){return;}for (var i = 0; i < markers.length; i++) {var marker = markers[i];marker.hide();}},showmarker:function(markers){if(markers.length == 0){return;}markers[markers.length-1].show();}

到此百度地图的画线和点击事件全部代码集成。

web实现地图画标识物相关推荐

react钩子_了解用户的React钩子
react钩子 Originally published at https://www.wisdomgeek.com on September 1, 2020. 最初于 2020年9月1日在 htt ...
百度地图画出手机GPS行驶轨迹——Web端
以下使用的坐标点是公司应用采集来的数据,大家可以在百度地图坐标拾取工具里面拾取到坐标来替换文章中的坐标. 方案一:DrivingRoute 原理是使用百度地图的DrivingRoute驾驶导航来拼接我 ...
逆天通用水印支持Winform，WPF，Web，WP，Win10。支持位置选择（9个位置 ==》[X]）...
常用技能:http://www.cnblogs.com/dunitian/p/4822808.html#skill 逆天博客:http://dnt.dkil.net 逆天通用水印扩展篇~新增剪贴板系列 ...
操作系统和Web服务器那点事儿
操作系统老大又一个进程启动了,操作系统老大叹了一口气,毕竟自己的肩头又多了一份责任. 让人烦恼的是,新来的家伙们很无知,几乎就是一张白纸.有些老实本分的会按照自己的规矩来做事,有些刺头儿喜欢问这问那 ...
PHP快还是HTML快,PHP_HTML－加速、再加速，web开发人员是否必须掌握复杂 - phpStudy...
HTML-加速.再加速 web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容易.无论是技术高 ...
asp.net web开发步骤_WEB开发流程
1.需求确定 2.分析与设计 (1)架构分析与设计 (2)业务逻辑分析 (3)业务逻辑设计 (4)界面设计 3.开发环境搭建 4.开发-测 ...
node.js 程序_如何不使用外部程序包创建Node.js Web应用程序
node.js 程序 by Abhinav Pandey 通过Abhinav Pandey 如何不使用外部程序包创建Node.js Web应用程序 (How to create a Node.js w ...
HTML+CSS期末大作业：动漫网站设计——悬崖上的金鱼姬(5页) / 动漫网页设计作业,网页设计作业 / 动漫网页设计成品学生DW网页设计作业成品 web课程设计网页规划与设计...
HTML+CSS期末大作业:动漫网站设计--悬崖上的金鱼姬(5页) 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有个人. 美食. 公司. 学校 ...
想进大厂必须要知道的Web安全问题
从胡子的长度和忧郁的眼神我察觉到,面前坐着的这位面试官应该有点东西,浑身上下流露着打过 CTF 的气场.我像以往一样,准备花3分钟的时间进行自我介绍.在此期间,面试官面无表情但很有耐心的听着我bil ...

web实现地图画标识物

web实现地图画标识物相关推荐

最新文章

热门文章