資訊專欄INFORMATION COLUMN
摘要：最近項目用到谷歌地圖，但是看谷歌文檔，對于國人來說，還是比較吃力的，網(wǎng)上找資料也并沒有太多的資料，所以就想分享給大家。顯示了整個地球地圖的完全縮放。
最近項目用到谷歌地圖，但是看谷歌api文檔，對于國人來說，還是比較吃力的，網(wǎng)上找資料也并沒有太多的資料，所以就想分享給大家。但是因為本人太懶了，每次研究技術(shù)完事時間一久就忘了，更別提分享了，在朋友的鼓勵支持之下，重新開始寫博客，共享給大家，如果有不到位或者錯誤的地方還希望大家多多指教。 畢竟交流才會進步(^o^)/~
好了，廢話不多說開始正題。
谷歌地圖官網(wǎng)：https://developers.google.com...
入門指南：https://developers.google.com...
好了，下面就貼一段簡單的案例代碼，入門指南里的
引入的js里需要一個秘鑰，現(xiàn)在引用的這個是可用的，如果想自己創(chuàng)建一個可以去官網(wǎng)里自己申請創(chuàng)建。
下面說下Google 地圖創(chuàng)建注意點：
1. 必須是用 聲明以 HTML5 形式聲明應用。
大多數(shù)瀏覽器使用 "標準模式" 的 HTML5 文檔渲染頁面，這就意味著你的應用是兼容各大瀏覽器的。
另外，如果沒有DOCTYPE標簽，瀏覽器則使用混雜模式 (quirks mode)進行渲染頁面內(nèi)容。 提示： 應該注意的是一些"混雜模式"中的CSS并不能使用與標準模式中。在具體的應用中，所有基于百分比的大小都必須從父塊元素繼承 。如果在父模塊中沒有指定大小，默認值為 0 x 0 像素。如果你想使用百分比，可以在
請輸入代碼 這個樣式聲明表明地圖模塊的（GoogleMap）應 HTML高度為100%。
2. 添加 Google 地圖 API Key
將google生成的 API key 放置于 key 參數(shù)中(key=YOUR_API_KEY)。 The sensor 參數(shù)是必須的，該參數(shù)用于指明應用程序是否使用一個傳感器 (類似 GPS 導航) 來定位用戶的位置。參數(shù)值可以設置為 true 或者 false。
3. 地圖 DOM 元素
要想在網(wǎng)頁上顯示地圖，我們必須為其預留一個位置。我們通常的實現(xiàn)方式是：創(chuàng)建一個命名的 div 元素，然后在瀏覽器的文檔對象模型 (DOM) 中獲取對該元素的引用。
4. 創(chuàng)建一個 Map 對象
map = new google.maps.Map(document.getElementById("map"), {...});
表示地圖的 JavaScript 類是 Map 類。該類的對象定義頁面上的單個地圖。（您可以創(chuàng)建該類的多個實例–每個對象都將定義頁面上的一個不同地圖。）我們利用 JavaScript new 運算符來新建該類的實例。
當您新建地圖實例時，您需要在頁面中以地圖容器形式指定一個
5. 定義地圖屬性
每個地圖都有兩個必需選項：center 和 zoom。還可以加上MapTypeId
map = new google.maps.Map(document.getElementById("map"), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
center（中心點）：中心屬性指定了地圖的中心，該中心通過坐標（緯度，經(jīng)度）在地圖上創(chuàng)建一個中心點。
Zoom（縮放級數(shù)）：zoom 屬性指定了地圖的 縮放級數(shù)。zoom: 0 顯示了整個地球地圖的完全縮放。
MapTypeId（地圖的初始類型）：mapTypeId 屬性指定了地圖的初始類型。mapTypeId包括如下四種類型：
google.maps.MapTypeId.HYBRID：顯示衛(wèi)星圖像的主要街道透明層
google.maps.MapTypeId.ROADMAP：顯示普通的街道地圖
google.maps.MapTypeId.SATELLITE：顯示衛(wèi)星圖像
google.maps.MapTypeId.TERRAIN：顯示帶有自然特征（如地形和植被）的地圖
好了，上述基本都是從官網(wǎng)上貼來整理的，至此應該都能正常創(chuàng)建地圖了。
新手注意：
但是問題來了，因為當時做項目，項目比較大，而且時間很緊，有個細節(jié)當時沒注意，就是在寫js的過程中，函數(shù)命名必須要要有 initMap()，不然會報錯，提示 Uncaught InvalidValueError: initMap is not a function.
項目中有的地圖是需要點擊彈出地圖層的，點擊事件才要執(zhí)行方法，然而每次都是自動執(zhí)行，提示各種問題。百度谷歌了好久，答案紛飛，仍然毫無頭緒，然后又耐心從頭操作了一遍，看文檔，對，當看到引入的js的時候，里面有個&callback=initMap ，臥槽，大罵一句，放到這么不起眼的地方，這不坑人么。 這句話應該刪除的。
后來仔細想想，還是自己技術(shù)不夠扎實，如果沒有callback 這個js里的initMap() 又怎么會執(zhí)行呢？
今天先寫這么多，明天寫下如何創(chuàng)建marker標記，記錄坐標位置，加油(^o^)/~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90853.html
摘要：今天又看了下官網(wǎng)，發(fā)現(xiàn)官網(wǎng)上有地圖標記的詳細說明。請注意，上述方法并不會刪除該標記。查看示例也可以參考上一篇文章，谷歌地圖開發(fā)之添加標記其實跟官網(wǎng)的基本原理也是一樣的。表示該標記應該在原地彈跳。將自動調(diào)整圖標大小。 今天又看了下官網(wǎng)，發(fā)現(xiàn)官網(wǎng)上有地圖標記的詳細說明。當時居然眼瞎看不見，還琢磨了好久...#$%^&，一定是項目太急，沒看到(^o^)/~地址：https://develop...
摘要：創(chuàng)建地圖之后，基本上都需要標記位置的，就是那個圓點。然后參考谷歌的，找了許久，網(wǎng)址代碼如下創(chuàng)建對象地圖居中到當前坐標這段運行效果，就是你點擊地圖就會添加一個標記。 創(chuàng)建地圖之后，基本上都需要標記位置的，就是那個圓點。然后參考谷歌的API，找了許久，網(wǎng)址：https://developers.google.com... 代碼如下: Accessing arg...
摘要：信息窗口具有一個內(nèi)容區(qū)域和一個錐形柄。添加信息窗口構(gòu)造函數(shù)采用了對象字面量，后者為顯示信息窗口指定了一組初始參數(shù)。其中包含此信息窗口錨定位置的。在標記上打開信息窗口將自動更新。用于指定信息窗口的最大寬度以像素為單位。 信息窗口 簡介 InfoWindow 在地圖上方給定位置的彈出窗口中顯示內(nèi)容（通常為文本或圖像）。信息窗口具有一個內(nèi)容區(qū)域和一個錐形柄。柄頂部與地圖上的某指定位置相連。 ...
閱讀 1382·2023-04-25 23:47
閱讀 951·2021-11-23 09:51
閱讀 4552·2021-09-26 10:17
閱讀 3761·2021-09-10 11:19
閱讀 3285·2021-09-06 15:10
閱讀 3572·2019-08-30 12:49
閱讀 2463·2019-08-29 13:20
閱讀 1764·2019-08-28 18:14
