博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
百度地图API
阅读量:6898 次
发布时间:2019-06-27

本文共 4820 字,大约阅读时间需要 16 分钟。

hot3.png

    
 
Hello,World 
     
 
  
                      
  var map = new BMap.Map("container");      //创建地图实例var point = new BMap.Point(106.33, 29.35); //创建点坐标,经度和纬度map.centerAndZoom(point, 15);         // 地图初始化map.addControl(new BMap.NavigationControl()); //将标准地图控件添加到地图中 很明显 在左上角map.addControl(new BMap.ScaleControl()); //一个比例尺控件 在左下角有一个500米map.addControl(new BMap.OverviewMapControl()); //一个缩略图控件 在右下角箭头处map.addControl(new BMap.TrafficControl()); //添加实时路况控件var tilelayer = new BMap.TileLayer();     //创建地图层实例 tilelayer.getTilesUrl=function(){       // 设置图块路径  return "layer.gif";   };   map.addTileLayer(tilelayer);          // 将图层添加到地图上  window.setTimeout(function(){   //等待两秒会移动到新中心点map.panTo(new BMap.Point(116.409, 39.918));  }, 2000);   // 编写自定义函数,创建标注   function  addMarker(point,index){ // 创建图标对象var myIcon = newBMap.Icon("http://api.map.baidu.com/img/markers.png", newBMap.Size(23, 25), {     offset: new BMap.Size(10,25),          // 指定定位位置    imageOffset: newBMap.Size(0, 0 - index * 25)  // 设置图片偏移   });    var marker = new BMap.Marker(point, {icon:myIcon});  map.addOverlay(marker); }// 随机向地图添加10个标注  var bounds = map.getBounds(); //得到边界var lngSpan = bounds.maxX - bounds.minX; //最大减去最小 x 横坐标var latSpan = bounds.maxY - bounds.minY;  //y纵坐标for (var i = 0; i < 10; i ++) {var point = new BMap.Point(bounds.minX + lngSpan *(Math.random() * 0.7 + 0.15),  bounds.minY + latSpan * (Math.random() * 0.7 +0.15)); addMarker(point, i);}var opts1 = {    width : 200,   // 信息窗口宽度   height: 100,   // 信息窗口高度   title : "北京天安门"  // 信息窗口标题  }   var infoWindow = new BMap.InfoWindow("北京天安门", opts1); // 创建信息窗口对象 map.openInfoWindow(infoWindow, map.getCenter());   // 打开信息窗口 //两点之间创建6像素宽的蓝色折线:var polyline = new BMap.Polyline([    new BMap.Point(116.399,39.910),     new BMap.Point(116.405,39.920)   ],  {strokeColor:"blue", strokeWeight:6,strokeOpacity:0.5}   );   map.addOverlay(polyline);//添加事件,点击事件map.addEventListener("click", function(e){   //var center = map.getCenter(); // alert(center.lng + ", " + center.lat);document.getElementByIdx_x_x_x("info").innerHTML = e.point.lng +", " + e.point.lat; //通过e对象得到点击的经纬度坐标});   //拖动事件map.addEventListener("dragend", function(){  var center = map.getCenter();  document.getElementByIdx_x_x_x("info").innerHTML = center.lng +", " + center.lat;   });  //通过this得到地图缩放后的级别。 地图缩放事件map.addEventListener("zoomend", function(){  document.getElementByIdx_x_x_x("info").innerHTML = "地图缩放至:" +this.getZoom() + "级";   });   //map.removeEventListener("click", showInfo); 移除监听事件var myPushpin = new BMap.PushpinTool(map);      // 创建标注工具实例  myPushpin.addEventListener("markend", function(e){ // 监听事件,提示标注点坐标信息  alert("您标注的位置:" +       e.marker.getPoint().lng + ", " +  e.marker.getPoint().lat);  });myPushpin.open();                  //开启标注工具 var myDis = new BMap.DistanceTool(map); //创建一个测距工具实例://设置为地图实例,并告知结果需要展现在地图实例上var local = new BMap.LocalSearch(map, {  renderOptions:{map: map}  });  local.search("天安门"); //每页显示8个结果,并且根据结果点位置自动调整地图视野,不显示第一条结果的信息窗口var local1 = new BMap.LocalSearch("北京市", {  renderOptions: {   map: map,     pageCapacity: 8,  autoViewport: true,     selectFirstResult: false  }   });   local1.search("中关村");//本地搜索对象提供一个结果列表容器,搜索结果会自动添加到容器元素中var local2 = new BMap.LocalSearch(map, {  renderOptions: {map: map, panel: "results"}  });   local2.search("中关村");//展示如何在前门附近搜索小吃:var local3 = new BMap.LocalSearch(map, {   renderOptions:{map: map, autoViewport: true}  });   local3.searchNearby("小吃", "前门");  //当前地图视野范围内搜索银行var local4 = new BMap.LocalSearch(map, {  renderOptions:{map: map}  });   local4.searchInBounds("银行", map.getBounds());  //数据接口将第一条方案的路线添加到地图上,并将所有方案的描述信息输出到页面上var transit = new BMap.TransitRoute("北京市"); transit.setSearchCompleteCallback(function(results){if (transit.getStatus() == BMAP_STATUS_SUCCESS){var firstPlan = results.getPlan(0); // 绘制步行线路   for (var i = 0; i 
 0){ // 步行线路有可能为0map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor:"green"}));} } // 绘制公交线路 for (i = 0; i 
");}});transit.search("中关村", "国贸桥");//方案描述会自动展示到页面上var driving = new BMap.DrivingRoute(map, {   renderOptions: {    map  :map,     panel : "results",    autoViewport: true  }   });   driving.search("中关村", "天安门");var options = {onSearchComplete: function(results){ if (driving.getStatus() ==BMAP_STATUS_SUCCESS){ // 获取第一条方案var plan = results.getPlan(0);// 获取方案的驾车线路  var route =plan.getRoute(0);  // 获取每个关键步骤,并输出到页面  var s = [];   for (var i = 0; i < route.getNumSteps(); i++){var step = route.getStep(i);  s.push((i + 1) + ". " + step.getDescription());}document.getElementByIdx_x_x_x("info2").innerHTML =s.join("
"); }}};var driving1 = new BMap.DrivingRoute(map, options);driving1.search("中关村", "天安门");// 创建地址解析器实例var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint("北京市海淀区上地10街10号", function(point){  if (point) {   map.centerAndZoom(point, 16);  map.addOverlay(new BMap.Marker(point));   }   }, "北京市");   

转载于:https://my.oschina.net/fuckBAT/blog/468476

你可能感兴趣的文章
CMPT4:如何在AD上创建System Management容器以及设置权限
查看>>
macOS Sierra pip install psycopg2 error
查看>>
shell scripts 知识点汇总
查看>>
Kafka知识点汇总
查看>>
db2ckpwd, db2wdog为什么需要root用户运行.
查看>>
运维-常用命令
查看>>
centos6.6安装最新firefox和firefox-flash-plugin
查看>>
phpmyadmin 显式ip
查看>>
C语言类型
查看>>
有关Patent Agreement
查看>>
c 语言多参数
查看>>
php缓存加速插件安装记录
查看>>
python:threading多线程模块-Condition实现复杂的同步
查看>>
Centos7使用YUM进行install或update出现KeyboardInterrupt错误
查看>>
网络扫描工作zenmap
查看>>
Nginx技巧:灵活的server_name
查看>>
嵌入式开发那点事之一
查看>>
css直接画方格
查看>>
Qt多个信号连接到一个槽,在槽中识别信号的发送者方法
查看>>
IOS学习笔记2—Objective C—类、属性、方法
查看>>