百度地圖API使用

標籤：style   blog   http   color   io   使用   java   ar   div   

1.引用js指令碼

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1510247b4244370cbac3851e4f029d31"></script>

2.html控制項

 <input type="text" id="suggestId" size="20" data-bind="value:place" placeholder="請輸入相關地址" class="wenb04" value="百度" /> <div class="biaodan_r" id="l-map"></div>                    <div id="searchResultPanel" style="border:1px solid #C0C0C0; height:auto; display:none;"></div>

3.document載入後，添加指令碼

<script type="text/javascript">    // 百度地圖API功能    function G(id) {        return document.getElementById(id);    }    var map = new BMap.Map("l-map");    map.centerAndZoom("深圳",12);                   // 初始化地圖,設定城市和地圖層級。    var ac = new BMap.Autocomplete(    //建立一個自動完成的對象        {"input" : "suggestId"        ,"location" : map        });    ac.addEventListener("onhighlight", function(e) {  //滑鼠放在下拉式清單上的事件        var str = "";        var _value = e.fromitem.value;        var value = "";        if (e.fromitem.index > -1) {            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;        }        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;        value = "";        if (e.toitem.index > -1) {            _value = e.toitem.value;            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;        }        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;        G("searchResultPanel").innerHTML = str;    });    var myValue;    ac.addEventListener("onconfirm", function(e) {    //滑鼠點擊下拉式清單後的事件        var _value = e.item.value;        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;        setPlace();    });    function setPlace(){        map.clearOverlays();    //清除地圖上所有覆蓋物        function myFun(){            var pp = local.getResults().getPoi(0).point;    //擷取第一個智能搜尋的結果            map.centerAndZoom(pp, 18);            map.addOverlay(new BMap.Marker(pp));    //添加標註        }        var local = new BMap.LocalSearch(map, { //智能搜尋            onSearchComplete: myFun        });        local.search(myValue);    }</script>

 

百度地圖API使用