百度地图api

时间 2019-11-09
标签百度地图 api 繁體版
原文原文链接
咱们能够进入百度API的网站学习百度地图API：http://lbsyun.baidu.com/index.php?title=jspopular，看完这些你应该基本上会掌握了javascript
demo.html:php
<!DOCTYPE html>  
<html> 
<head>
  <title>百度地图</title>
  <meta charset="utf-8"> 
  <meta name="Generator" content="EditPlus">  
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <!--设置样式，使地图充满整个浏览器窗口-->  
  <style>
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}
  </style>  
  <!--引用百度地图的api，其中v表明版本-->  
  <script src="http://api.map.baidu.com/api?v=1.2"></script>  
</head>  
  
<body>
  <!--地图容器-->
  <div id="container"></div>
  <script>  
    //建立一个地图实例，参数能够是元素id也能够是元素对象，其中BMap是百度地图API里面的命名空间  
    var map = new BMap.Map("container");
    //建立一个坐标点，其中116表示经度，39表示纬度
    var point = new BMap.Point(116.404,39.915);
    //建立地图实例后，必须对其进行初始化，初始化后才能进行其它的操做，该方法设置中心点坐标和地图级别  
    map.centerAndZoom(point,15);  
    //启用轮滚进行放大缩小，默认为禁用  
    map.enableScrollWheelZoom();  
    //向地图添加控件  
    map.addControl(new BMap.NavigationControl());//平移缩放控件，默认在地图左上方  
    map.addControl(new BMap.ScaleControl());//比例尺控件，默认在地图左下方  
    map.addControl(new BMap.OverviewMapControl());//缩略图控件，默认在地图右下方  
  
    //控制控件的位置,anchor:表示停靠在地图的哪一个脚，offset指定偏移量，离地图边界相隔多少像素  
    var opts={anchor:BMAP_ANCHOR_TOP_RIGHT,offset:new BMap.Size(10,10)};  
    map.addControl(new BMap.NavigationControl(opts));  
  
    //用户自定义控件须要经过JS中的prototype属性继承BMap.Control  
  
    //地图覆盖物(标注、矢量图形元素和信息窗口等)
    var marker = new BMap.Marker(point); //建立标注  
    map.addOverlay(marker);//将标注添加到地图中  
    marker.enableDragging();//表示标注可拖拽，默认不可

    // 监听标注点击事件  
    marker.addEventListener("click",function(){  
      alert("你点击了标注");  
    });  
    //监听标注拖拽位置事件  
    marker.addEventListener("dragend",function(e){  
      alert("当前位置:"+e.point.lng+","+e.point.lat);//表示经纬度  
    });  
  
    var opts2={width:250,height:100,title:"hello"};//信息窗口  
    var infoWindow = new BMap.InfoWindow("world",opts2);//建立信息窗口对象  
    map.openInfoWindow(infoWindow,map.getCenter());//打开信息窗口  
  
    var tilelayer = new BMap.TileLayer();//建立地图层实例  
    tilelayer.getTilesUrl=function(){//设置图块路径  
      return "layer.gif";  
    };  
    map.addTileLayer(tilelayer);//将图层添加到地图上  
  
    // var myPushpin=new BMap.PushpinTool(map);//建立标注工具实例  
    // myPushpin.addEventListener("markend",function(e){  
    //   alert("你标注的位置："+e.marker.getPoint().lng+","+e.marker.getPoint().lat);  
    // });  
    // myPushpin.open();//开启标注工具  
   
    //建立搜索实例，并将结果展示在地图实例上  
    var local = new BMap.LocalSearch(map,{  
      renderOptions:{map:map,panel:"results"}//搜索结果自动添加到搜索结果列表容器中  
    });  
    local.search("长沙");//搜索长沙  
  
  
    //下面是对地图的一些操做，等待两秒钟后，它会移动到新的中心点  
    // window.setTimeout(function(){  
    //   map.panTo(new BMap.Point(116.409,39.918));  
    // },2000);
  </script>  
</body>
</html>
.html