• <noscript id="ecgc0"><kbd id="ecgc0"></kbd></noscript>
    <menu id="ecgc0"></menu>
  • <tt id="ecgc0"></tt>

    如何調用百度地圖的API接口,并顯示出地理位置

    在我們日常敲代碼寫網站的過程中,我們有時辰可能需要把一些地輿位置顯示出來在網頁中。那么我們必定不是本身寫出這個地圖的代碼,一般是直接挪用這個地圖本自己供給的API接口。 本經驗以百度地圖為例,展示一下若何在我們日常所寫的【html】中,挪用而且顯示出我們需要的地圖上的地輿位置~

    東西/原料

    • 百度地圖API接口
    • vs2012

    方式/步調

    1. 1

      ???? 百度直接搜【百度地圖挪用】,點擊呈現的第二個網站,進入這個網站即可,如圖所示~

      8326cffc1e178a8299e59f9cfb03738da977e835.jpg
    2. 2

      ????? 進入這個網站后,我們起首得輸入本身需要定位的地址。好比我們輸入【上海】這個城市,輸入后點擊【查找】選項,如圖所示

      10dfa9ec8a1363272b21220f9c8fa0ec08fac73a.jpg
    3. 3

      ???? 顛末上一步的操作,我們已經當作功地定位到【上海】這個城市了。然后我們點擊第二步【設置地圖】,如圖所示~

      d4628535e5dde71136aca0caaaefce1b9d166194.jpg
    4. 4

      ????? 在【設置地圖】里面有一些關于這個地圖自己顯示的一些設置選項,好比可以設置地圖的【尺寸巨細】,地圖的【添加按鈕】和地圖的【狀況】。這里不做一一設置,有樂趣伴侶按照本身的需要去設置。

      ???? 這里以設置地圖的【尺寸巨細】為例,好比設置為【500*500】,那么地圖的尺寸就會釀成【500*500】了,如圖所示~

      0b55b319ebc4b74559f8542ac2fc1e178a821599.jpg
    5. 5

      ???? 然后我們起頭給我們的地圖添加【地圖標注】,點擊這個【小棒子】圖標,如圖所示。然后在我們需要標注的處所鼠點擊一下,輸入需要點竄的名稱和備注,然后點擊【保留】按鈕。如圖所示~

      962bd40735fae6cd7bf6485d02b30f2442a70f4f.jpg c75c10385343fbf2326e451fbd7eca8065388f48.jpg
    6. 6

      ???? 顛末上面的一些操作后,我們可以看到我們本身添加的地輿位置所顯示出的結果了,將近年夜功樂成了,頓時就可以或許見到黎明的曙光了~

      9f510fb30f2442a7dc9d1e99dc43ad4bd113027e.jpg
    7. 7

      然后我們點擊底部的【獲代替碼】,再點擊【復制代碼】即可,如圖所示~

      4b90f603738da9771dc16517bd51f8198618e324.jpg
    8. 8

      ????? 在vs2012里面新建一個【html】文件,然后把我們方才復制過來的代碼直接粘貼到里面,如圖所示。

      ???? 這里不僅僅可以用vs2012,也可以利用其他的代碼軟件,讀者按照本身的利用習慣去決議這個軟件的選擇,好比還有DW,甚至是記事本也行等等。

      ???? 然后在vs2012里面選擇利用【谷歌瀏覽器】查看這個【html】文件里面的內容,如圖所示~

      279759ee3d6d55fbe032951a60224f4a20a4dd12.jpg
    9. 9

      這個是在【谷歌瀏覽器】里面運行出來的,在當地的百度地圖顯示出地輿位置的結果圖。可以看到,我們已經當作功地挪用了百度地圖的API接口了,如圖所示~

      8718367adab44aed029f5dd8be1c8701a18bfb3d.jpg
    10. 10

      以上就是若何挪用百度地圖API去顯示出我們需要的位置的地圖上的位置的方式了,但愿可以或許給需要的伴侶一點幫忙~

      END

    注重事項

    • 這個只是簡單的挪用百度地圖的API,加倍深切的挪用需要我們日常平凡去進修和堆集~
    • 有不大白的伴侶,可以給我留言,我們再交流交流~
    • 發表于 2018-08-26 00:00
    • 閱讀 ( 1466 )
    • 分類:科學教育

    0 條評論

    請先 登錄 后評論
    聯系我們:uytrv@hotmail.com 問答工具
  • <noscript id="ecgc0"><kbd id="ecgc0"></kbd></noscript>
    <menu id="ecgc0"></menu>
  • <tt id="ecgc0"></tt>
    久久久久精品国产麻豆