調用百度地圖

阿新 • • 發佈：2019-03-15

eve com con ons 默認經緯 set tel nco

示例圖

技術分享圖片

代碼

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">



        body, html {
            width:  
100%;
            height: 100%;
            margin: 0;
            font-family: "微軟雅黑";
        }


        #l-map {
            height: 800px;
            width: 100%;
            float: left;
        }


        #r-result {
            width: 20%;
        }
    </style>
    <script type=" 
text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yoursecret"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?ak=您的秘鑰"></script>
    <title>拾取地址的坐標</title>
</head>
<body>
    <div id="r-result">
        請輸入地址：
         
<br />
        <input type="text" id="txtKeyword" />
        <br />
        <button onclick="searchAddr()">搜索</button>
    </div>
    <div id="l-map"></div>

</body>
</html>
<script type="text/javascript">
    // 百度地圖API功能
    map = new BMap.Map("l-map");            // 創建Map實例
    map.centerAndZoom("{$address}", 12);
    map.enableScrollWheelZoom();    //啟用滾輪放大縮小，默認禁用
    map.enableContinuousZoom();    //啟用地圖慣性拖拽，默認禁用
    map.addControl(new BMap.NavigationControl());  //添加默認縮放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默認縮略地圖控件
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打開

    local = new BMap.LocalSearch(map, {
        renderOptions: { map: map, autoViewport: true, selectFirstResult: false },
        pageCapacity: 10
    });

    myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
        offset: new BMap.Size(10, 25),
        imageOffset: new BMap.Size(0, 0 - 10 * 25)
    });


    var keys = new Array("{$address}");

    local.setSearchCompleteCallback(function (searchResults) {
        console.log(searchResults);
        if (typeof (searchResults) == "undefined") {
            alert("百度API沒有搜索到該地址");
            return;
        }
        if (searchResults.length > 0) {
            var searchResult = searchResults[0];
        } else {
            var searchResult = searchResults;
        }

        console.log(searchResult);

        var contents = [];
        for (var i = 0; i < searchResult.getCurrentNumPois(); i++) {
            //獲得需要得到的坐標
            var poi = searchResult.getPoi(i);
            if (!poi) {
                alert("百度API沒有搜索到該地址");
            }
            // console.log(poi);

            //設置中心點
            map.centerAndZoom(poi.point, 13);
            // 創建標註，為要查詢的地方對應的經緯度
            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat), { icon: myIcon });
            //alert("["+poi.point.lng+","+poi.point.lat+"]");
            //在地圖上添加標識
            map.addOverlay(marker);
            //點擊標識後顯示的內容
            contents[i] = "你要查找的地方:【" + poi.title + "】<br/>地址：" + poi.address + "<br/>經度：" + poi.point.lng + "<br/>緯度：" + poi.point.lat;

            marker.setTitle(contents[i]);
            //添加點擊事件監聽
            marker.addEventListener("click", makerClick);
            if (i == 0) {
                var infoWindow = new BMap.InfoWindow("<p style=‘font-size:14px;‘>" + contents[0] + "</p>");
                marker.openInfoWindow(infoWindow);
            }

        }

    });
    local.search(keys);

    var makerClick = function () {
        var infoWindow = new BMap.InfoWindow("<p style=‘font-size:14px;‘>" + this.getTitle() + "</p>");
        this.openInfoWindow(infoWindow);
    }

    function searchAddr() {
        var keys = document.getElementById("txtKeyword").value;
        local.search(keys);
    }
</script>

調用百度地圖

HTML5頁面直接調用百度地圖API,獲取當前位置，直接導航目的地(轉)

wid dir tle mark utf-8 mil 獲取 open init HTML5頁面直接調用百度地圖API,獲取當前位置，直接導航目的地我是應用在微信中，自定義菜單，菜單直接鏈接到這個HTML5頁面，獲取當前位置後，頁面中定好目的地，這樣打開頁面後直接進入導航頁

前端切圖:調用百度地圖API

chm over ice element tle keyboard style mat 搜索原型圖圖片發自簡書App <!DOCTYPE html> <html> <head> &l

教程-Delphi調用百度地圖API(XE8+WIN7)

創建地圖 exe show initial exce sse html sys proc unit U_map; interface //---------------------------------------------------// //----------

Python調用百度地圖API（路線規劃、POI檢索）——第一部分

api mil 申請 eap pos ice poi檢索 pytho 例如項目的目的是為了查詢某個點附近某些POI的最近距離，例如查詢天安門到附近最近的商場的距離（時間） 1.百度地圖API 程序中用到百度地圖的兩個API，分別是（1）路線規劃服務（又名Directio

APICloud平臺調用百度地圖模塊只出現網格的問題

apicloud app1.控制臺添加bMap模塊2.進行實名認證：http://lbsyun.baidu.com/apiconsole/auth3.確保代碼config文件配置key值正確4.ios包名 android包名填寫正確要與控制臺概覽裏面一致5.重新雲編譯或自定義loader（真機同步無效）6.

調用百度地圖開發平臺的JavascriptAPI實現將市縣位置轉換成坐標

json 2.7 func 技術分享真的工具深圳市 tar () 最近的項目要做的地圖比較多，有的還比較復雜，而地圖用到的坐標，上網找json文件更是良莠不齊的。真是讓人傷腦筋，後來突然想到了百度地圖開發平臺，沒想到真的有對應的API哦，謝天謝地！！！下面說一下完整的

HTML5頁面直接調用百度地圖API,獲取當前位置，直接導航目的地

position new html5 head css target str direction lmap <!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"

調用百度地圖API的小demo

wid nor 自己 pre tle src new 北京 ava update <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=

調用百度地圖API定位位置

nbsp stat toc tle over enable city user 密鑰以下代碼是百度開發示例代碼： <html> <head> <meta http-equiv="Content-Type" content="text

PHP調用百度地圖API

err turn call 啟用 render 取數 reverse pre rev //百度地理位置接口API $lat = 39.912108791024; $lng = 116.48299016095; $ak = "5slgyqGDENN7Sy7pw29IUvrZ"

解決跨域問題，實例調用百度地圖

同步 method 回調資源地圖api 官方 java 跨域傳輸 node 1.什麽是跨域？瀏覽器對於javascript的同源策略的限制,例如a.com下面的js不能調用b.com中的js,對象或數據(因為a.com和b.com是不同域),所以跨域就出現了。同域的概

調用百度地圖

eve com con ons 默認經緯 set tel nco 示例圖代碼 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"

調用百度地圖示例

borde earch asc num eve value mar chl scrip <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l

調用百度富文本

bold str lock www rep upload ont mat orm 1、修改內容 <div class="form-group"> <label for="post-content">文章內容</label&

python調用百度語音（語音識別-鬥地主語音記牌器）

receive idt 本地文件 file post 最終 callback import pri 一、概述本篇簡要介紹百度語音語音識別的基本使用（其實是鬥地主時想弄個記牌器又沒money，抓包什麽的又不會，只好搞語音識別的了）二、創建應用打開百度語

用SSM框架實現第一個echarts的例子及一個調用百度開發者工具的例子

response char ons enc styles ping 地理編碼 nco swa 　　過年後的第一篇Blog，說實話年後的自己好慵懶，一直處於半睡半醒狀態￣□￣｜｜。年後工作上用了好多新東西，像Spring Boot,Swagger,Jenkins,Maven,

調用百度翻譯API接口功能

bytes on() tar vip IT sdn replace method odin public string appid = "自己的APPID"; public string q = "要翻譯的文本"; public st

PHP調用百度api生成短網址&根據短網址恢復長網址

生成 mage long failed apidoc pos color png 隱患接口api文檔地址：http://dwz.cn/#/apidoc?_k=i9ev5p 　代碼demo header("Content-type: text/html; charset

怎樣在自己的網頁中調用百度API

lan desc html list ava 基於工業 overview ewma https://blog.csdn.net/u010251278/article/details/52877370 以下內容轉自上述網站，為了以後的學習方便，為此才特地將該網站內容轉到自

移動端瀏覽器調起百度地圖、高德地圖

類似這樣，點選兩個按鈕，分別調到各自的app客戶端，沒有客戶端跳進移動端的web地圖中。百度地圖和高德地圖都提供了各自的地圖呼叫的方法。百度api 高德api 百度的稍微麻煩一些，不過還好，我頁

調用百度地圖

相關推薦