百度搜索地形图载入闪动点座标难题

  • 栏目:公司新闻 时间:2021-04-02 03:53 分享新闻到:
<返回列表

近期有一个要求要采用百度搜索地形图的闪动点,官方网站得出来的demo连接jsdemo.htm#c1_6
全部百度搜索地形图的demo当地运作都必须自身的密匙

百度地图密匙

①有同学们问为何demo拷贝到当地沒有显示信息闪动点

if (document.location.host === '') {
 var url = "jsdemo/data/data";
} else {
 var url = "../data/data";
}

最先demo得出来的上边一段编码便是闪动点的座标,就载入当地的../data/data的数据信息,全部当地检测的情况下要把数据信息储存到当地

②把里边数据信息改动成百度搜索座标为何沒有显示信息闪动点
由于deom里给的检测数据信息座标其实不是百度搜索地形图座标,是墨卡托座标点,这一难题刚刚刚开始沒有搞搞清楚,因此一直百度搜索找处理浏览,百度搜索了一圈沒有結果,demo里都没有表明,最终见到demo里编码注解里提及墨卡托座标点,因此往这一方位找这一处理方式
,百度搜索地形图api里墨卡托座标和百度搜索地形图座标能够互转

//百度搜索座标变换成墨卡托座标
var baiduXY=new BMap.Point(x,y)
var projection2 = map.getMapType().getProjection();
var mocaXY = projection2.lngLatToPoint(baiduXY);
x=mocaXY.x
y=mocaXY.y
//墨卡托座标变换成百度搜索座标
var point = project.pointToLngLat(new BMap.Pixel(x, y));
var px = map.pointToOverlayPixel(point);
x=px.x
y=px.y

最终我将百度搜索地形图载入闪动点demo改动了一下编码

1) 把demo数据信息改动成百度搜索照片座标,那样便可令其用百度搜索座标拾取专用工具拾取座标 lbsapi/
2) 加上另外一种色调的闪动点
3) 加上了大城市目录控制

编码以下

 !DOCTYPE HTML 
 html 
 head 
 title 载入闪动点 /title 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ 
 meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" 
 style type="text/css" 
 html,body{
 margin:0;
 width:100%;
 height:100%;
 background:#333;
 #map{
 width:100%;
 height:100%;
 #panel {
 position: absolute;
 top:30px;
 left:10px;
 z-index: 999;
 color: #fff;
 #login{
 position:absolute;
 width:300px;
 height:40px;
 left:50%;
 top:50%;
 margin:-40px 0 0 -150px;
 #login input[type=password]{
 width:200px;
 height:30px;
 padding:3px;
 line-height:30px;
 border:1px solid #000;
 #login input[type=submit]{
 width:80px;
 height:38px;
 display:inline-block;
 line-height:38px;
 /style 
 script type="text/javascript" src="api?v=2.0 ak=您的密匙" /script 
 /head 
 body 
 div id="map" /div 
 script type="text/javascript" 
 var map = new BMap.Map("map", {}); // 建立Map案例
 map.centerAndZoom(new BMap.Point(116.404, 39.915), 5); // 原始化地形图,设定管理中心点座标和地形图级別
 map.enableScrollWheelZoom(); //开启滚轮变大变小

features: ["road", "building","water","land"],//掩藏地形图上的poi style : "dark" //设定地形图设计风格为高档黑 map.setMapStyle(mapStyle); var BW = 0, //canvas width BH = 0, //canvas height ctx = null, stars = [], //储存全部星星目标的数字能量数组 timer = null, //定时执行器 timeLine = null, //時间轴目标 rs = [], //全新的結果 isNowTimeData = false, //是不是显示信息当今時间的精准定位状况 py = null, //偏位 gridWidth = 10000,//网格图的尺寸 isOverlay = false,//是不是累加 //gridWidth = 1,//网格图的尺寸 canvas = null; //偏位 function Star(options){ this.init(options); Star.prototype.init = function(options) { this.x = ~~(options.x); this.y = ~~(options.y); this.state = ~~(options.state); this.initSize(options.size); if (~~(0.5 + Math.random() * 7) == 1) { this.size = 0; } else { this.size = options.size; Star.prototype.initSize = function(size) { var size = ~~(size); this.maxSize = size 6 ? 6 : size; Star.prototype.render = function(i) { var p = this; if(p.x 0 || p.y 0 || p.x BW || p.y BH) { return; ctx.beginPath(); var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size); gradient.addColorStop(0, "rgba(7,120,249,1)"); gradient.addColorStop(1, "rgba(7,120,249,0.3)"); //console.log(p) ctx.fillStyle = gradient; ctx.arc(p.x, p.y, p.size, Math.PI*2, false); ctx.fill(); if (~~(0.5 + Math.random() * 7) == 1) { p.size = 0; } else { p.size = p.maxSize; Star.prototype.renderError = function(i) { var p = this; if(p.x 0 || p.y 0 || p.x BW || p.y BH) { return; ctx.beginPath(); var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size); gradient.addColorStop(0, "rgba(255,120,249,1)"); gradient.addColorStop(1, "rgba(255,120,249,0.3)"); //console.log(p) ctx.fillStyle = gradient; ctx.arc(p.x, p.y, p.size, Math.PI*2, false); ctx.fill(); if (~~(0.5 + Math.random() * 7) == 1) { p.size = 0; } else { p.size = p.maxSize; function render(){ renderAction(); setTimeout(render, 180); function renderAction() { ctx.clearRect(0, 0, BW, BH); ctx.globalCompositeOperation = "lighter"; for(var i = 0, len = stars.length; i len; ++i){ //console.log(stars) if (stars[i]) { if(stars[i].state==1){ stars[i].renderError(i); }else{ stars[i].render(i); //stars[i].render(i);
ComplexCustomOverlay.prototype = new BMap.Overlay(); ComplexCustomOverlay.prototype.initialize = function(map){ this._map = map; canvas = this.canvas = document.createElement("canvas"); canvas.style.cssText = "position:absolute;left:0;top:0;"; ctx = canvas.getContext("2d"); var size = map.getSize(); canvas.width = BW = size.width; canvas.height = BH = size.height; map.getPanes().labelPane.appendChild(canvas); //map.getContainer().appendChild(canvas); return this.canvas; ComplexCustomOverlay.prototype.draw = function(){ var map = this._map; var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var pixel = map.pointToOverlayPixel(new BMap.Point(sw.lng, ne.lat)); py = pixel; if (rs.length 0) { showStars(rs); var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101)); map.addOverlay(myCompOverlay); var project = map.getMapType().getProjection(); var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); sw = project.lngLatToPoint(new BMap.Point(sw.lng, sw.lat)); ne = project.lngLatToPoint(new BMap.Point(ne.lng, ne.lat)); //左上方墨卡托座标点 var original = { x : sw.x, y : ne.y * 恳求精准定位数据信息,并在地形图上绘图出 * @param 恳求的時间 * @param 取得成功后实行的回调函数涵数 var requestMgr = { request: function (time, successCbk) { if (document.location.host === '') { var url = "jsdemo/data/data"; } else { var url = "../data/data.json"; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if( xhr.readyState == 4 xhr.status == 200 ) { if (!isOverlay) { rs = JSON.parse(xhr.responseText); } else { rs = rs.concat(JSON.parse(xhr.responseText)); if (rs.length 10000) { rs.splice(0, rs.length - 10000); showStars(rs); if (successCbk) { successCbk(); xhr.open( "GET", url, true ); xhr.send( null ); //显示信息星星 function showStars(rs) { stars.length = 0; var temp = {}; for (var i = 0, len = rs.length; i len; i++) { //var mctXY = new BMap.Pixel(rs[i][0],rs[i][1]); var baiduXY=new BMap.Point(rs[i][0],rs[i][1]) var projection2 = map.getMapType().getProjection(); var mocaXY = projection2.lngLatToPoint(baiduXY); //console.log(mocaXY) var item = rs[i]; var addNum = gridWidth / 2; var x = item[0] * gridWidth + addNum; var y = item[1] * gridWidth + addNum; x=mocaXY.x y=mocaXY.y var point = project.pointToLngLat(new BMap.Pixel(x, y)); var px = map.pointToOverlayPixel(point); //create all stars var s = new Star({ x: px.x - py.x, y: px.y - py.y, size: item[2], state: item[3] //console.log(s) stars.push(s); canvas.style.left = py.x + "px"; canvas.style.top = py.y + "px"; renderAction(); render(); function nowTimeCbk (time) { requestMgr.request(time, function(){ if (isNowTimeData) { setTimeout(function(){ if (isNowTimeData) { startCbk(nowTimeCbk); }, 1000); function startCbk(cbk){ var now = new Date(); var time = { hour : now.getHours(), minute : now.getMinutes(), second : now.getSeconds() if (cbk) { cbk(time); startCbk(nowTimeCbk); } else { alert('请在chrome、safari、IE8+之上访问器查询本实例'); /script /body /html

PS.应用上边的编码检测必须自身的百度搜索地形图密匙
数据信息
data/data.json

[[121.485137,31.235733,8,0],[121.504739,31.164204,8,0],[116.404413,39.91433,8,1]]

主要参数
0:x轴
1:y轴
2:点尺寸
3:色调的闪动点0-深蓝色 1-粉红
共享下编码实际效果图

百度地图加载闪烁点效果图

分享新闻到:

更多阅读

百度搜索地形图载入闪动点座标难题

公司新闻 2021-04-02
近期有一个要求要采用百度搜索地形图的闪动点,官方网站得出来的demo连接jsdemo.htm#c1_6全部百...
查看全文

提升blog点一下率的5点提议

公司新闻 2021-04-01
短视頻,自新闻媒体,达人种草1站服务怎样提升blog的点一下率,是博主们都在思索的难题。提...
查看全文

殊荣身后,是护航我国重特大每日任务的

公司新闻 2021-04-01
殊荣身后,是护航我国重特大每日任务的当担—航空航天手机软件评测管理中心自主创新发展...
查看全文
返回全部新闻


区域站点: 南丰县兔展h5制作   南宫市h5免费模板在哪里找   囊谦县h5设计   南和县h5制作工具   南华县兔展h5制作   南江县h5免费模板在哪里找   南京市h5设计   南靖县h5制作工具   南康市兔展h5制作   南乐县h5免费模板在哪里找   南陵县h5设计   南宁市h5制作工具   南平市兔展h5制作   南皮县h5免费模板在哪里找   南市区h5设计   南通市h5制作工具   南投县兔展h5制作   南雄市h5免费模板在哪里找   南溪县h5设计   南阳市h5制作工具   南漳县兔展h5制作   南召县h5免费模板在哪里找   南郑县h5设计   那坡县h5制作工具   那曲县兔展h5制作   纳雍县h5免费模板在哪里找   讷河市h5设计   内黄县h5制作工具   内江市兔展h5制作   内丘县h5免费模板在哪里找   内乡县h5设计   嫩江市h5制作工具   聂荣县兔展h5制作   尼玛县h5免费模板在哪里找   尼木县h5设计   宁安市h5制作工具   宁波市兔展h5制作   宁城县h5免费模板在哪里找   宁德市h5设计   宁都县h5制作工具   宁国市兔展h5制作   宁海县h5免费模板在哪里找   宁化县h5设计   宁晋县h5制作工具   宁陵县兔展h5制作   宁明县h5免费模板在哪里找   宁南县h5设计   宁强县h5制作工具   宁陕县兔展h5制作   宁武县h5免费模板在哪里找   宁乡市h5设计   宁阳县h5制作工具   宁远县兔展h5制作   农安县h5免费模板在哪里找   磐安县h5设计   盘锦市h5制作工具   盘山县兔展h5制作   磐石市h5免费模板在哪里找   盘州市h5设计   蓬安县h5制作工具   澎湖县兔展h5制作   蓬莱市h5免费模板在哪里找   彭山县h5设计   蓬溪县h5制作工具   彭阳县兔展h5制作   彭泽县h5免费模板在哪里找   彭州市h5设计   偏关县h5制作工具   平安县兔展h5制作   平昌县h5免费模板在哪里找   平定县h5设计   屏东县h5制作工具   平度市兔展h5制作   平果县h5免费模板在哪里找   平和县h5设计   平湖市h5制作工具   平江县兔展h5制作   平乐县h5免费模板在哪里找   平凉市h5设计   平利县h5制作工具   平罗县兔展h5制作   平陆县h5免费模板在哪里找   屏南县h5设计   平泉市h5制作工具   屏山县兔展h5制作   平顺县h5免费模板在哪里找   平塘县h5设计   平潭县h5制作工具   平武县兔展h5制作   萍乡市h5免费模板在哪里找   平乡县h5设计   平阳县h5制作工具   平遥县兔展h5制作   平阴县h5免费模板在哪里找   平邑县h5设计   平远县h5制作工具   平舆县兔展h5制作   皮山县h5免费模板在哪里找   普安县h5设计   浦北县h5制作工具   浦城县兔展h5制作   普洱市h5免费模板在哪里找   普格县h5设计   浦江县h5制作工具   普兰县兔展h5制作   普宁市h5免费模板在哪里找   莆田市h5设计   迁安市h5制作工具   乾安县兔展h5制作   潜江市h5免费模板在哪里找   潜山市h5设计  

友情链接: 銘軒科技 h5和小程序有什么 威隆压缩机 h5 互动抽奖 h5在线免费制作 h5模板网站 免费 手机版 装修知识 软件下载 果树种植 深圳新闻 自助建站 H5小游戏

Copyright © 2002-2020 h5设计_h5制作工具_兔展h5制作_h5免费模板在哪里找_h5小游戏 版权所有 (网站地图) 备案号:粤ICP备10235580号