百度地圖開放平臺使用總結

時間 2019-11-10

標籤百度地圖開放平臺使用總結简体版

原文原文鏈接

背景

項目中用到百度地圖組件，是要作一個店鋪的商家地理位置頁面，使用百度地圖JavaScript API，在這裏梳理一下大概過程。javascript

1、申請ak

在百度地圖開放平臺控制檯申請ak,得到商用受權。受權後就能夠使用地圖api了。css

2、代碼中引入

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

在引入時把ak當作參數寫在src裏。接下來就能夠愉快使用各類api了。html

3、api使用

下面我複製了一個文檔上的例子，個人實際應用場景和這個例子差很少，如今HTML中引入map，而後建立一個地圖掛載的DOM元素，命名好id,就能夠根據業務場景選擇合適的api使用啦，仍是挺簡單方便的。java

<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:300px;width:100%;}
        #r-result{width:100%;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
    <title>本地搜索的結果面板</title>
    </head>
    <body>
        <div id="l-map"></div>
        <div id="r-result"></div>
    </body>
</html>
<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("l-map");            // 建立Map實例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    var local = new BMap.LocalSearch(map, {
        renderOptions: {map: map, panel: "r-result"}
    });
    local.search("餐飲");
</script>

相關標籤/搜索

每日一句

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