成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

谷歌服務(wù):Google Maps JavaScript API

since1986 / 2018人閱讀

摘要:使用前準(zhǔn)備能訪(fǎng)問(wèn)外網(wǎng),有賬戶(hù)。進(jìn)入開(kāi)發(fā)者控制臺(tái)谷歌開(kāi)發(fā)者控制臺(tái)創(chuàng)建項(xiàng)目初次需要?jiǎng)?chuàng)建一個(gè)項(xiàng)目,作為使用的依托。我們創(chuàng)建名為的項(xiàng)目,進(jìn)入后再選擇和服務(wù)模塊。密鑰是使用的必須的標(biāo)識(shí)符,可以多地多方使用。的很多服務(wù)不是靜態(tài)的可以與對(duì)比。

使用前準(zhǔn)備

能訪(fǎng)問(wèn)外網(wǎng),有Google賬戶(hù)。

進(jìn)入開(kāi)發(fā)者控制臺(tái)

谷歌開(kāi)發(fā)者控制臺(tái)

創(chuàng)建項(xiàng)目

初次需要?jiǎng)?chuàng)建一個(gè)項(xiàng)目,作為使用的依托。
我們創(chuàng)建名為test的項(xiàng)目,進(jìn)入后再選擇API和服務(wù)模塊。

啟用相應(yīng)API

點(diǎn)擊左側(cè)庫(kù)模塊,進(jìn)入API選擇頁(yè)面,找到Google Maps JavaScript API點(diǎn)擊并啟用。

創(chuàng)建密鑰

點(diǎn)擊左側(cè)密鑰模塊,創(chuàng)建一個(gè)API密鑰
密鑰是使用API的必須的標(biāo)識(shí)符,可以多地多方使用。
密鑰一般有某些配額,比如訪(fǎng)問(wèn)次數(shù)、每次訪(fǎng)問(wèn)的流量等等。
密鑰可以自定義某些限制,比如使用此密鑰的網(wǎng)站只能是某某域名下的等等。

開(kāi)始使用

Map JS API 官方使用介紹 與 Map JS API 官方API文檔
每一門(mén)框架,都有自己的編寫(xiě)思想和使用規(guī)則,而這些東西與其它框架很多時(shí)候是互通可類(lèi)比的。
所以,我們要使用之前的經(jīng)驗(yàn)來(lái)類(lèi)比學(xué)習(xí)新的框架,并在查看官方文檔,API結(jié)構(gòu)時(shí)細(xì)細(xì)感受此框架的規(guī)則。
JS Map API有中文文檔,而且內(nèi)容詳細(xì)通俗易懂,所以在這里不再作介紹。但今后會(huì)就某些需要注意的地方持續(xù)更新。

注意
下面代碼中的key是本人真實(shí)的密鑰,僅僅為了方便共同學(xué)習(xí)使用。
畢竟初次直接的成功運(yùn)行,不僅能保持和提高探究的熱情,更能節(jié)約一大筆無(wú)謂的時(shí)間花銷(xiāo)。
不過(guò)因?yàn)橛信漕~限制,希望大家溫柔的對(duì)待。

在普通頁(yè)面中使用




  
  Document



  
  
在前端框架中使用

vue.js為例。
這里使用了最原始的 google-maps 包,可以使用npm直接安裝。

Google的很多服務(wù)不是靜態(tài)的Library(可以與JQ對(duì)比)。
每次將不同的配置通過(guò)API發(fā)送給Google,它再返回我們需要的東西(代碼圖片等等)。
也即是說(shuō),初次使用時(shí),都要發(fā)送請(qǐng)求接收到相應(yīng)對(duì)象后,我們?cè)偈褂盟詧?zhí)行相應(yīng)的操作。
這也意味著我們安裝的依賴(lài)包,里面不是其源代碼,而是幫助我們?cè)诳蚣艿沫h(huán)境下請(qǐng)求其源代碼的代碼。

import GoogleMapsLoader from "google-maps";

export default {
  name: "google-map",
  mounted() {
    GoogleMapsLoader.KEY = "AIzaSyBSqv9FMHThX9DU_JK_pbwxzBQushtGfv4";

    GoogleMapsLoader.load((google) => {
      let map = new google.maps.Map(document.getElementById("map"), {
        zoom: 3,
        center: { lat: 34, lng: 106 }
      });
    });
  }
};

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/94775.html

相關(guān)文章

  • 關(guān)于谷歌Google Maps JavaScript API 的學(xué)習(xí)與分享

    摘要:最近參與頁(yè)面插入谷歌地圖的項(xiàng)目,因此在此分享下我的學(xué)習(xí)經(jīng)驗(yàn),第一次寫(xiě),請(qǐng)多擔(dān)待首先,講下項(xiàng)目的需求,在網(wǎng)頁(yè)進(jìn)行點(diǎn)擊產(chǎn)品列表,渲染對(duì)應(yīng)的地圖信息以及對(duì)應(yīng)的詳情信息,并且修改谷歌固有標(biāo)簽以及點(diǎn)擊標(biāo)簽出現(xiàn),展示詳細(xì)信息以及對(duì)應(yīng)的產(chǎn)品。 最近參與頁(yè)面插入谷歌地圖API的項(xiàng)目,因此在此分享下我的學(xué)習(xí)經(jīng)驗(yàn),第一次寫(xiě),請(qǐng)多擔(dān)待! 首先,講下項(xiàng)目的需求,在網(wǎng)頁(yè)進(jìn)行點(diǎn)擊產(chǎn)品列表,渲染對(duì)應(yīng)的地圖信息以及對(duì)...

    HackerShell 評(píng)論0 收藏0
  • 關(guān)于谷歌Google Maps JavaScript API 的學(xué)習(xí)與分享

    摘要:最近參與頁(yè)面插入谷歌地圖的項(xiàng)目,因此在此分享下我的學(xué)習(xí)經(jīng)驗(yàn),第一次寫(xiě),請(qǐng)多擔(dān)待首先,講下項(xiàng)目的需求,在網(wǎng)頁(yè)進(jìn)行點(diǎn)擊產(chǎn)品列表,渲染對(duì)應(yīng)的地圖信息以及對(duì)應(yīng)的詳情信息,并且修改谷歌固有標(biāo)簽以及點(diǎn)擊標(biāo)簽出現(xiàn),展示詳細(xì)信息以及對(duì)應(yīng)的產(chǎn)品。 最近參與頁(yè)面插入谷歌地圖API的項(xiàng)目,因此在此分享下我的學(xué)習(xí)經(jīng)驗(yàn),第一次寫(xiě),請(qǐng)多擔(dān)待! 首先,講下項(xiàng)目的需求,在網(wǎng)頁(yè)進(jìn)行點(diǎn)擊產(chǎn)品列表,渲染對(duì)應(yīng)的地圖信息以及對(duì)...

    silenceboy 評(píng)論0 收藏0
  • 谷歌地圖 API 開(kāi)發(fā)之新建地圖

    摘要:最近項(xiàng)目用到谷歌地圖,但是看谷歌文檔,對(duì)于國(guó)人來(lái)說(shuō),還是比較吃力的,網(wǎng)上找資料也并沒(méi)有太多的資料,所以就想分享給大家。顯示了整個(gè)地球地圖的完全縮放。 最近項(xiàng)目用到谷歌地圖,但是看谷歌api文檔,對(duì)于國(guó)人來(lái)說(shuō),還是比較吃力的,網(wǎng)上找資料也并沒(méi)有太多的資料,所以就想分享給大家。但是因?yàn)楸救颂珣辛耍看窝芯考夹g(shù)完事時(shí)間一久就忘了,更別提分享了,在朋友的鼓勵(lì)支持之下,重新開(kāi)始寫(xiě)博客,共享給大家...

    Winer 評(píng)論0 收藏0
  • 谷歌地圖 API 添加形狀

    摘要:谷歌地圖形狀官網(wǎng)簡(jiǎn)介您可以向地圖添加各種形狀。移除園如需移除地圖中的圓,請(qǐng)調(diào)用方法,并傳遞作為其自變量。將形狀設(shè)置為可拖動(dòng)默認(rèn)情況下,在地圖上繪制的形狀位置固定。 最近加班真是累成狗啊,天天10點(diǎn)以后下班。還有其他的事情,總之都是要死要死的感覺(jué),苦逼的程序員。谷歌地圖形狀官網(wǎng):https://developers.google.com... 簡(jiǎn)介 您可以向地圖添加各種形狀。形狀是地圖上...

    xiaoxiaozi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<