百度地圖LBS應用開發代碼

時間  2020-08-09
標籤 百度 地圖 lbs 應用 開發 代碼 简体版
原文   原文鏈接

最近由於工做須要，領導要我將51地圖API開發的一個應用遷移到百度地圖，或者說用百度地圖API進行重寫，實現一樣的功能。我先是把現有的這個51地圖的應用瞭解了一下，而後就試着用百度地圖作一些demo，最後就本身動手參照原來的應用的功能，用百度地圖實現了一下。下面就給你們介紹一下，百度地圖API開發的一些基礎技術。javascript

首先，百度地圖API的官方首頁是：http://dev.baidu.com/wiki/static/index.htm，上面介紹了不少詳細的信息，各類版本的API，成功案例，還有在線幫助文檔，固然了這些文檔也能夠下載下來離線查閱。在web中使用百度地圖API進行開發，主要是用到百度地圖JavaScript版，也就是用JS進行開發。百度地圖封裝了具體實現的細節，咱們做爲程序員，只要按照百度地圖的API說明文檔，結合實例代碼，進行開發就能夠了。html

首先看一下百度地圖的Hello World。java

操做步驟：程序員

一、創建一個HTML頁面，導入百度地圖API的JSweb

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

 二、在頁面的body部分，插入一個地圖容器算法

<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>

 三、鍵入如下代碼，瀏覽該頁面，一個最簡單的實例就OK了。數據庫

<script type="text/javascript">
var map = new BMap.Map("container");            // 建立Map實例
var point = new BMap.Point(116.404, 39.915);    // 建立點座標
map.centerAndZoom(point,15);                    // 初始化地圖,設置中心點座標和地圖級別。
</script>

主要是有幾個概念，就是物體的標註，是經過經緯度來定位的，北緯多少°多少′多少″，東經多少°多少′多少″，這樣就可以精確的定位。可是在從51地圖遷移到百度地圖的時候，遇到了一個問題就是，座標定位不許的問題，當時也想了不少辦法，好比設置一個統一的偏離值來進行座標的矯正，可是實驗後發現一個座標準了，另外一個不必定也是按照一樣的規則進行偏移。後來就想百度是否提供了轉換座標系或者直接就是從其它地圖系統座標轉換的接口，通過網上的一番搜索，最後發現了兩種方法，通過測試發現，這兩種方法實現的效果是同樣的，都是把原來的GPS地位的座標轉換成了百度地圖的座標（之因此出現座標偏移的現象，百度官方的解釋是根據國家要求須要對地圖數據進行加密，百度採用了某種算法，進行了二次加密，因此偏移不統一），這裏分享一下具體的方法。api

操做步驟：數組

一、在頁面head部分，導入百度座標轉換接口APIoracle

<script type="text/javascript" src="http://dev.baidu.com/wiki/static/map/API/examples/script/convertor.js"></script>

 二、在js函數裏面，鍵入以下代碼，經過回調函數得到p的座標

BMap.Convertor.translate(ggPoint,2,function(p){
    //ggPoint是轉換前的座標，好比51地圖座標；2是轉換參數，表明是51地圖，0-4有效，表明不一樣的地圖系統    
});

 這裏再附錄一下http接口：http://api.map.baidu.com/ag/coord/convert?from=0&to=4&x=116.397428&y=39.90923&callback=BMap.Convertor.cbk_7594

經過x跟y的數值，返回結果座標是經過base64加密的（讀者能夠本身試一試）。 

附一個asp的動態讀取數據庫並加載到baidu Map的簡單例子。

<div id="container">
        <div id="leftBar" class="leftBar">
            <center><h4>當前在線單位<font color=red>(<%=rs_kf(0)%>)</font></h4></center>
            <script src="http://www.yz91.net/Map2/kefu/kf/index.asp"></script>
        </div>
        <div id="centerBar" class="centerBar">
            <div id="mapDiv" style="width:100%; height:100%;"></div>
        </div>
        <div id="rightBar" class="rightBar">
            <div>
            <center><h4>最新招聘信息</h4></center>
            <ul id="demo1" style="list-style:none;width:100%;margin-left:5px;padding:0;"> 
                <%
                    Set conn1 = Server.CreateObject("ADODB.Connection")
                    constr1="Provider=MSDAORA.1;Password=xxx;User ID=yyy;Data Source=orcl;Persist Security Info=True"
                    conn1.Open constr1
                    
                    Dim rs_oracle,strSql_oracle
                    strSql_oracle="select acb200,acb210,AAB004,ACB216,ACB221||'-'||ACB222,ACB211,ACB212,ACB213,ACB21r,AAC011,NVL(ACC034,ACC214) DY,AAE004,AAE005,aae036,substr(aae020,0,3) from v_cb2021 where substr(aae020,0,3)='xxx'or substr(aae020,0,3)='xxx' or substr(aae020,0,3)='xxx' or substr(aae020,0,3)='xxx' order by aae030 desc"
                    set rs_oracle=conn1.Execute(strSql_oracle)
                %>
                <%
                    Do While Not rs_oracle.Eof
                %>
                <%
                    url="http://www.yz91.net/Company/JobDeital/"& rs_oracle("ACB200")
                %>
                <li>
                    <a href="<%=url%>" target="_blank"><font color="#0066ff"><%=rs_oracle("AAB004")%></font>   <font color=black><%=rs_oracle("ACB216")%></font></a>
                </li>
                <%
                    rs_oracle.MoveNext
                    Loop
                %>
            </ul>
            </div>
            <div id="demo2" style="width:0px;"></div>
        </div>
    </div>

 js部分：

<script type="text/javascript">
<!--全局變量start-->
var map;//地圖容器
var circle;//圓形區域
var centerMaker;//圓形中心點覆蓋物
var centerMakerIcon ;//圓形中心點覆蓋物圖片
var point;//座標原點

var datas=[];//數據源數組
var myIcon;//圖標

<!--全局變量end-->

//雙擊後從新定位
function dblClickCallBack(Epoint){
    delCircleOverlay();
    point = Epoint;
    addOverlay(point,$("theradius").value);
    addCenterMarker(point);
    map.setCenter(point);
}
//添加覆蓋物
function addOverlay(point,radius){
    circle = new BMap.Circle(point,radius,{fillColor:"#123456", strokeColor:"#FF0000", strokeWeight: 2 ,fillOpacity: 0.1, strokeOpacity: 0.3});
    map.addOverlay(circle);
}
//添加中心覆蓋物
function addCenterMarker(point){
    centerMaker = new BMap.Marker(point,{icon: centerMakerIcon});
        map.addOverlay(centerMaker);
}

//刪除覆蓋物
function delCircleOverlay(){
     map.removeOverlay(circle);
     map.removeOverlay(centerMaker);
}

//經過ip獲取地址
function myFun(result){
        var cityName = result.name;
        //map.setCenter(cityName);
    point = map.getCenter();    
}

//初始化地圖
function initMap(){
    map=new BMap.Map("mapDiv");
    p1=119.41372;
        p2=32.39425;
        point=new BMap.Point(p1,p2);
        map.centerAndZoom(point,15);

    map.enableScrollWheelZoom();//支持鼠標滾輪
        map.enableKeyboard();//支持鍵盤操做
        map.disableDoubleClickZoom();//禁用雙擊放大
        map.setDraggingCursor("crosshair");//設置拖拽地圖時的鼠標指針樣式
    
    var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)};
        map.addControl(new BMap.NavigationControl(opts)); //添加地圖導航面板
    
    centerMakerIcon = new BMap.Icon("images/poin01.png",new BMap.Size(24, 24));
    myIcon = new BMap.Icon("images/centerPoi.gif",new BMap.Size(24, 24));
    
    var myCity = new BMap.LocalCity(); //ip定位
    myCity.get(myFun);

    map.centerAndZoom(point,15);
    delCircleOverlay();
    addOverlay(point,1000);//初始化半徑爲1公里的圓
        addCenterMarker(point);//添加圓心中央的圖片
    
    initData();//初始化地圖數據
    
    map.addEventListener("dblclick",function(e){
        dblClickCallBack(e.point);
    });    
    
    $("theradius").οnchange=function(){
        dblClickCallBack(point);
        $("spanRadius").innerHTML=$("theradius").value/1000;    
    }
}

function initData(){
    <%
      Dim conn,strConn
      Set conn=Server.CreateObject("ADODB.Connection")
      strConn="Provider=MSDAORA.1;Password=xxx;User ID=yyy;Data Source=orcl;Persist Security Info=True"
      conn.Open strConn
     
      Dim rs,strSql
      strSql="select * from V_MAPZP where 1=1"
      
      if(request("AAB301")<>"") then
      p1=Split(trim(request("AAB301")),",")(0)
      p2=Split(trim(request("AAB301")),",")(1)
      qy=Split(trim(request("AAB301")),",")(2)
      strSql=strSql+" and ACB200 like "+"'%"&qy&"%'"
      end if
      if(request("ZPGW")<>"") then
      gw=trim(request("ZPGW"))
      strSql=strSql+" and ZPGW like "+"'%"&gw&"%'"
      end if

      set rs=conn.Execute(strSql)
    %>
    var p1="<%=p1%>";
    var p2="<%=p2%>";
    var point;
    if(p1==0&&p2==0){
        point=new BMap.Point(119.41372,32.39425);
    }else{
        point=new BMap.Point(p1/100000,p2/100000);
    }

    //map.centerAndZoom(point,15);
    //delCircleOverlay();
    //addOverlay(point,1000);//初始化半徑爲1公里的圓
    //addCenterMarker(point);//添加圓心中央的圖片

    var myCity = new BMap.LocalCity(); //ip定位
    myCity.get(myFun);

    map.centerAndZoom(point,15);
    delCircleOverlay();
    addOverlay(point,1000);//初始化半徑爲1公里的圓
        addCenterMarker(point);//添加圓心中央的圖片

    <%
      i=0
      Do While Not rs.Eof
    %>
        var ggPoint= new BMap.Point(<%=rs("LNG")%>/100000,<%=rs("LAT")%>/100000);
        BMap.Convertor.translate(ggPoint,2,function(p){
            var marker = new BMap.Marker(p,{icon: myIcon});
            map.addOverlay(marker);
            marker.setLabel(new BMap.Label("<%=rs("AAB004")%>",{offset:new BMap.Size(25,2)}));
          
            var opts = {
              width : 260,     // 信息窗口寬度
              height: 0,     // 信息窗口高度
              title : "<b>企業信息</b>"  // 信息窗口標題
            }
            var html="<div align=left>名稱：<%=rs("AAB004")%></div>";
            var html=html+"<div align=left>聯繫人：<%=rs("AAE004")%> 電話：<%=rs("AAE005")%></div>";
            var html=html+"<div align=left>地址：<%=rs("AAE006")%></div>";
            var html=html+"<div align=center>";
            var html=html+"<a class=ORG href=http://www.www.com"+<%=right(rs("ACB200"),14)%>+" target=_blank>招聘信息</a></div>";

            var infoWindows = new BMap.InfoWindow(html, opts);  // 建立信息窗口對象
            marker.addEventListener("click", function(){          
               this.openInfoWindow(infoWindows);  
            });
        });
    <%
      i= i + 1
      rs.MoveNext
      Loop
    %>
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程