近期有一个要求要采用百度搜索地形图的闪动点，官方网站得出来的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-粉红
共享下编码实际效果图
