百度地圖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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。