基于百度地图API的开发

最新推荐文章于 2025-11-28 15:43:26 发布

原创最新推荐文章于 2025-11-28 15:43:26 发布 · 2.6k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了基于百度地图API的开发经验，从选择合适的Demo开始，强调理解每个函数和参数的重要性，以及遵循清晰的变量命名规范。通过封闭开发，作者提升了技术能力，增强了分析问题和解决问题的技巧，认识到简单的办法可能并不适用，需要不断尝试和磨练以促进技术的飞跃进步。

（1）百度地图API

根据自己的需求在百度地图demo中找到适合自己需求的demo

（第一步很重要，找对了demo事半功倍，找错了后期开发很可能遇到问题，需要重新回来找）

（2）开发

既然是人家开发的东西，我们是基于百度地图开发，就需要看懂每个函数的作用，参数，就是类参考。

看不懂类参考的话我们就不会用它的函数，所以学习类参考很重要。

另外还有变量命名规范问题，命名必须清楚，表示已经吃到两变量名相同的苦头。

（3）总结

第一次封闭开发技术应该提升了不少，学到了很多东西。

分析问题的能力也有提升，一条路走到死胡同，立刻换路。

一般很简单的方法是不可能实现的，但你也要亲自尝试之后才能发现。

总之，多磨练吧，在磨练中技术才能得到飞跃提升。

关键代码：

function firstClickPoint(){ //先从地图上设置一个点
endClickPoint  = function(e){//声明点击事件 
window.lng=e.point.lng;
window.lat=e.point.lat;
startX.push(e.point.lng);
startY.push(e.point.lat);
map.removeOverlay(Marker);//在添加一个新Marker前清除掉之前的Marker
Marker = new BMap.Marker(new BMap.Point(lng,lat));
map.addOverlay(Marker);
if(startX.length>1){//每次添加毒气时，圆的半径长度、椭圆长轴长度初始化
radius=200;
x=0.002;  y=0.002;
m=0.002;  n=0.002;
q=0.002;  w=0.002;
e=0.002;  r=0.002;
t=0.002;  p=0.002;
f=0.002;  g=0.002;
h=0.002;  j=0.002;
k=0.002;  l=0.002;
} 
}
map.addEventListener("click",endClickPoint);//添加点击事件
window.endClickPoint = endClickPoint;
return [startX,startY];
}


    var clickHandle;
function startClickGetMapPoint(){//起始坐标 
//var clickHandle=function(a){
// for(sub;sub<startX.length;sub++){
// var startMarker = new BMap.Marker(new BMap.Point(startX[sub],startY[sub]),{icon:myIcon});
// map.addOverlay(startMarker);
// } 
var option=document.getElementById("area").value;
var level=document.getElementById("level").value; //  fillOpacity 颜色填充透明度
window.level=level;
window.windSpeed=document.getElementById("windSpeed").value;
    if(radius>=500||!(x<0.004&&y<0.006)||!(m<0.004&&n<0.006)||!(q<0.007&&w<0.004)||!(e<0.007&&r<0.004)
    ||!(t<0.004&&p<0.006)||!(f<0.004&&g<0.006)||!(h<0.004&&j<0.006)||!(k<0.004&&l<0.006)){
    lng=undefined; lat=undefined;
    }//确保一个点只能有一个毒气效果(风向) 
switch(option){
case "empty": circle(); break;
case "rightNorth": rightNorth(); break;
case "rightSouth": rightSouth(); break;
case "rightWest": rightWest(); break;
case "rightEast": rightEast(); break;


case "northWest": northWest(); break;
case "northEast": northEast(); break;
case "southWest": southWest(); break;
case "southEast": southEast(); break;
default:break;
} 
//}
//map.addEventListener("click",clickHandle);
//window.clickHandle=clickHandle;  
return [startX,startY];
} 


function circle(){//无风
var mPoint = new BMap.Point(lng,lat);
var oval = new BMap.Circle(mPoint,radius,{fillColor:"red", strokeWeight: 1 ,fillOpacity: level, strokeOpacity: 0.1});
map.addOverlay(oval);
var content="毒气蔓延中心位置位于：经度"+lng+"纬度"+lat+"半径大小为："+radius+"米";
window.content=content;
addClickHandler(content,oval);
if(radius<500){
radius=radius+100;
setTimeout("circle()",1000);//每隔一秒变化一次
} 
}