html之百度地图接口的使用
2017-11-29 20:55
169 查看
文首日常小结:自从挑战杯的事情开始了之后,总是忙的漫无目的。虽然是按照挑战杯自己的部分工作来做的,但是感觉其他的事情都仿佛被打乱了一样。可能是还没有适应这种繁忙的节奏吧。所以这两周脑子作什么都是一团乱麻。还好上周末吕某某同学来看我,和他分享了很多,也出去走了走。这几天才开始真正有做事情的感觉。然后来说这个程序,这个程序实现的是实现一个动态地图的功能,使用的是百度的api接口。之前先是想用echarts做的,然后发现那个比较复杂,百度的接口更加简单一些。所以就直接用现在的这个了。(由于直男的审美基本可以忽略,所以里面的配色部分是重灾区,能看的懂就好了。。。)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #map { width: 100%; height: 100%; } </style> </head> <body> <div id="map"></div> <canvas id="canvas"></canvas> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度密钥"></script> <script type="text/javascript" src="mapv.js"></script> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("map", { enableMapClick: false }); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.395645038, 39.9299857781), 12); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 map.setMapStyle({ style: 'light' //设置地图模板 }); var randomCount = 300; var data=[]; var testdata=[这里是数据部分,数据格式为“经度,纬度,权值”]; var n=0; while (randomCount--) { data.push({ geometry: { type: 'Point', coordinates: [testdata , testdata[n+1]] //经纬度 }, count: testdata[n+2], //每个点的数值 time: 100*Math.random() }); n=n+3; } /* for(i in data){ for (x in data[i]) for (a in data[i][x]) document.write(data[i][x][a]+"<br/ >") } //查看data内的数据 */ var dataSet = new mapv.DataSet(data); var options = { fillStyle: 'rgba(55, 50, 250, 0.8)', shadowColor: 'rgba(255 ,255 ,0, 1)', shadowBlur: 20, //shadowBlur模糊等级 size: 15, //设置数字大小 globalAlpha: 1, //透明度 animation: { type: 'time', stepsRange: { start: 0, end: 100 }, trails: 10, //每个点持续时间 duration: 20, //完成动画所花费的时间 }, label: { show: true, fillStyle: 'white', }, gradient: { 0.15: "rgb(11,171,205)", 0.65: "rgb(78,78,176)", 1.0: "rgb(237,40,145)"}, draw: 'grid' } //设置图的部分属性 var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options); </script> </body> </html>
相关文章推荐
- 百度地图接口及使用
- 关于几个HTML文档接口的使用探讨
- Ihtmldocument2接口的使用
- Ihtmldocument2接口的使用
- 关于几个HTML文档接口的使用探讨
- Ihtmldocument2接口的使用
- 【HTML】百度地图webAPI使用
- 关于几个HTML文档接口的使用探讨
- Ihtmldocument2接口的使用
- 关于几个HTML文档接口的使用探讨
- 百度地图简单使用——添加折线,圆形等(html,js)
- html百度地图使用记录
- 使用百度地图接口实现自定义网页地图开发实现
- 百度地图接口使用例子
- Fries:使用HTML、JavaScript和CSS搭建Android本地接口
- 根据后台接口获取动态数据,使用JS拼接html
- AndroidStudio中百度地图接口使用配置相关总结
- Android SDK 百度地图通过poi城市内检索简介接口的使用
- 有关html5+调用百度地图接口导致坐标有偏差问题
- 【百度地图】接口使用资料