
發(fā)布時間:2019-07-11 18:23:28 信息來源: 發(fā)布作者:卡金網(wǎng)絡(luò)
在建設(shè)網(wǎng)站中用到地圖是很常見的,在國內(nèi)大部分都是用百度地圖,但是有時候可能會用到國外地址,這時候就只能使用谷歌地圖了,下面就介紹常用網(wǎng)站中使用谷歌地圖方法集合。
一,使用框架引入谷歌地圖
用框架引入谷歌地址是最簡單的方法,不是專業(yè)開發(fā)人員也可以操作。登陸ditu.google.cn地圖,輸入地址信息,如:"烏魯木齊東方明珠",把地圖移動到合適的視角,點擊分享鏈接后,有兩個信息。第一個是一個網(wǎng)址,用于在瀏覽器中打開的;第二個是一個框架的代碼,網(wǎng)站中通常使用這個代碼。把代碼復(fù)制到網(wǎng)站中去就可以了,里面可以自己設(shè)定度度,高度,語言等信息。

二,使用谷歌地圖api開發(fā)
Api開發(fā)必須要專業(yè)人員才可以的,要會javascript,和簡單的html。
谷歌地圖api開發(fā)文檔寫的很全(如果打不開請使用fanqiang軟件):
說明文檔:https://developers.google.com/maps/documentation/javascript/tutorial
方法調(diào)用說明:https://developers.google.com/maps/documentation/javascript/reference
Api參考:https://developers.google.com/maps/documentation/javascript/reference
示例代碼:https://developers.google.com/maps/documentation/javascript/examples/
文檔寫的很詳細(xì),要是全部閱讀下來至少要花幾個月以上時間,對于不是全部依賴地圖的網(wǎng)站來說太多了,下面我們就,海外房地產(chǎn)用到地圖來演示。
1,首頁我們要在網(wǎng)頁中引入谷歌的javascript包:
<script src="http://maps.google.cn/maps/api/js?v=3.exp&sensor=false"></script>
注意:官方給出的是:https://maps.googleapis.com/maps/api/js 但是因為谷歌被屏蔽的原因國內(nèi)使用這個谷歌api打不開,所以建議使用google.cn這個引用地址
2,地圖函數(shù)
function initialize() { var myLatlng = new google.maps.LatLng(32.9556728100,112.5659179688);//谷歌坐標(biāo)地址 var mapOptions = { zoom: 14,//這里是地圖的放大縮小 center: myLatlng } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: '這是我的地方'//坐標(biāo)點提示 });}調(diào)用函數(shù)很簡單,只有一個函數(shù),大致意思解釋一下:var myLatlng = new google.maps.LatLng(32.9556728100,112.5659179688);后面的一串?dāng)?shù)字就是坐標(biāo)點。如何獲取坐標(biāo)點呢?右上角有個"google實驗室"里面有個顯示經(jīng)緯度,啟用。然后鼠標(biāo)放在地圖上找到點后右擊選擇"放置經(jīng)緯度標(biāo)記",然后就可以復(fù)制了。如下圖:
var marker = new google.maps.Marker({ position: myLatlng, map: map, title: '這是我的地方'//坐標(biāo)點提示 });這段函數(shù)是在需要的位置上加個紅色的標(biāo)記,title是鼠標(biāo)放在上面顯示的文字,這個大部分都會用到的,如果不需要把上面那段代碼刪除即可。2,html中需有一個dom給地圖展示的,在div上添加一個id為"map-canvas"即可,如:<div id="map-canvas"></div> 3,函數(shù)寫完以后,在頁面加載好以后執(zhí)行函數(shù)就可以了,可以在body里添加onload="initialize()",也可以放在jquery的ready函數(shù)里 下面給出完整的示例代碼:<!DOCTYPE html><html><head><title>谷歌地圖調(diào)用</title><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8"><style> html, body, #map-canvas { height: 500px; width:600px; margin: 0px; padding: 0px }</style><script>function initialize() { var myLatlng = new google.maps.LatLng(32.9556728100,112.5659179688);//谷歌坐標(biāo)地址 var mapOptions = { zoom: 14, center: myLatlng } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: '這是我的地方'//坐標(biāo)點提示 });}</script> </head> <body onload="initialize()"> <div id="map-canvas"></div> </body></html> 如果一個網(wǎng)站中有多處使用地圖如何使用呢?這里我建議大家建立一個單獨的文件,用于顯示地圖的,如在根目錄建議一個map.php,在iframe引用的時候傳入坐標(biāo)點,和標(biāo)記即可。
下面我給出了個地圖調(diào)用鏈接,如果你不想寫代碼的話也可以直接調(diào)用的:
http://www.zgxrkj.com/demo/map/index.php?zuobiao=32.9556728100,112.5659179688&title=谷歌地圖標(biāo)記
如果覺得要獲取坐標(biāo)太麻煩,有沒有直接傳入地址就顯示的呢?
谷歌地圖這方面做的很全,很好。谷歌地圖給出了geocoder方向,也就是說通過地址去獲取坐標(biāo)。那這樣就簡單很多了,但是美中不足的是在內(nèi)地有時候打不開。此刻你是不是有種*****(此處省略一萬字),
可以試著訪問:http://www.zgxrkj.com/demo/map/map2.php?address=中國烏魯木齊
把后面的地址改成你的地址看看是不是就獲取到了呢?具體代碼右擊源文件就看到了,這里就不做深入講解了。
這里大家簡單的介紹一些常用的功能,如果你要深入開發(fā),還需要對官方的開發(fā)文檔仔細(xì)閱讀。
人人狠狠综合久久亚洲| 欧美午夜精品久久久| 91麻豆福利精品推荐| 中文字幕一区在线| 成人小视频在线| **网站欧美大片在线观看| 91丨porny丨最新| 亚洲高清三级视频| 欧美成人a∨高清免费观看| 国产一区二区三区最好精华液| 国产亚洲一区二区三区在线观看| 99久久国产综合精品色伊| 一区二区三区国产精华| 日韩午夜电影av| www.亚洲在线| 日韩精品高清不卡| 国产精品天干天干在观线| 欧美日韩一区不卡| 风间由美一区二区三区在线观看| 亚洲国产精品久久艾草纯爱| 久久婷婷国产综合精品青草| 91国偷自产一区二区三区成为亚洲经典| 香蕉加勒比综合久久| 久久精品视频一区| 欧美喷水一区二区| 北条麻妃国产九九精品视频| 五月综合激情日本mⅴ| 亚洲国产精品激情在线观看| 欧美日产国产精品| 91麻豆产精品久久久久久 | 久久精品网站免费观看| 日本道色综合久久| 国产成人av影院| 亚洲人精品午夜| 日韩午夜激情视频| jvid福利写真一区二区三区| 中文字幕五月欧美| 久久久精品影视| 欧美一区二区三区四区久久| 欧美色中文字幕| 欧洲精品在线观看| 日本韩国一区二区三区视频| 成人av在线电影| 成人激情小说乱人伦| 国产乱码字幕精品高清av| 麻豆精品视频在线观看视频| 国产精品不卡一区| 国产精品久久影院| 中文字幕在线不卡一区| 国产精品久久久爽爽爽麻豆色哟哟 | 久久午夜羞羞影院免费观看| 欧美日韩一区不卡| 欧美性生活影院| 91免费版在线看| 欧美中文字幕一区二区三区亚洲| 91香蕉视频污| 色哟哟在线观看一区二区三区| 国产**成人网毛片九色| 从欧美一区二区三区| 不卡视频免费播放| 国产成人免费av在线| 粉嫩av一区二区三区粉嫩| 国产一区二区三区电影在线观看 | 国产成人综合网| 成人av电影在线| 色婷婷久久久综合中文字幕| 色婷婷亚洲综合| 91美女片黄在线观看| 欧美日韩一区二区在线观看视频 | 欧美日韩三级一区| 4438x亚洲最大成人网| 日韩免费一区二区| 国产精品视频在线看| 亚洲人成伊人成综合网小说| 亚洲chinese男男1069| 久久精品99久久久| 高清不卡一区二区在线| 91久久一区二区| 日韩精品中文字幕在线一区| 中文无字幕一区二区三区| 亚洲欧洲成人精品av97| 天堂影院一区二区| 国产成人在线网站| 在线一区二区视频| 精品国产一区二区国模嫣然| 1区2区3区精品视频| 毛片av一区二区| 播五月开心婷婷综合| 欧美日韩一区视频| 亚洲国产电影在线观看| 午夜亚洲福利老司机| 国产真实精品久久二三区| 色综合天天综合| 久久久久青草大香线综合精品| 亚洲欧美日韩一区二区 | 欧美精品一区在线观看| 欧美激情在线免费观看| 国产精品国产三级国产专播品爱网| 亚洲成人免费看| 国产成人av电影在线| 欧美性欧美巨大黑白大战| www日韩大片| 依依成人精品视频| 日本怡春院一区二区| 一本一本久久a久久精品综合麻豆 一本一道波多野结衣一区二区 | 99精品国产99久久久久久白柏| 国模娜娜一区二区三区| 99精品视频在线播放观看| 欧美一卡二卡在线| 亚洲精品国产品国语在线app| 麻豆国产一区二区| 99久精品国产| 国产亚洲精品aa午夜观看| 天使萌一区二区三区免费观看| aaa国产一区| 欧美一区二区三区在线视频| 国产欧美va欧美不卡在线| 麻豆一区二区99久久久久| 91黄色免费网站| 国产精品国产a| 国内精品在线播放| 日韩精品中文字幕一区二区三区 | 亚洲综合在线观看视频| 国产河南妇女毛片精品久久久| 91精品国产综合久久久蜜臀粉嫩 | 久久久久久**毛片大全| 婷婷综合久久一区二区三区| 色网站国产精品| 国产精品国产三级国产有无不卡| 国产不卡免费视频| 中文一区一区三区高中清不卡| 国产成人综合视频| 欧美国产精品劲爆| av一区二区三区| 国产精品久久久久久妇女6080| 国产99久久久久久免费看农村| 日韩欧美二区三区| 国产精品一区二区三区四区| 日韩午夜av电影| 国产成人a级片| 中文字幕欧美一区| 欧美中文字幕一区二区三区亚洲| 一卡二卡三卡日韩欧美| 欧美色图天堂网| 偷偷要91色婷婷| www国产精品av| 成人黄色电影在线| 亚洲国产日韩精品| 欧美日本一区二区| 国产一区二区三区香蕉| 国产视频一区二区在线| av激情综合网| 亚洲午夜影视影院在线观看| 欧美又粗又大又爽| 麻豆免费看一区二区三区| 国产亚洲精品7777| 欧美在线免费观看亚洲| 免费在线欧美视频| 中文在线一区二区| 久久久精品2019中文字幕之3| youjizz国产精品| 亚洲成av人片| 国产无遮挡一区二区三区毛片日本| 国产在线观看免费一区| 一区二区欧美精品| 日韩一卡二卡三卡| 91蝌蚪porny| 悠悠色在线精品| 国产亚洲精品超碰| 欧美日韩一区二区三区不卡| 国产精品一区二区三区网站| 国产精品久久综合| 久久综合色综合88| 日本电影亚洲天堂一区| 国产成人小视频| 亚洲图片欧美综合| 国产清纯白嫩初高生在线观看91| 99久久精品国产一区二区三区 | 国产在线视视频有精品| 国产精品国产三级国产普通话三级| 91精品国产91久久久久久最新毛片| 国产精品亚洲专一区二区三区| 亚洲国产精品尤物yw在线观看| 日韩欧美一区二区不卡| 色综合久久综合中文综合网| 另类中文字幕网| 亚洲第一成人在线| 久久久久综合网| 日韩欧美电影一区| 欧美日韩在线播放| 91精品办公室少妇高潮对白| 国产精品一级黄| 久久疯狂做爰流白浆xx| 石原莉奈在线亚洲三区| 亚洲视频在线观看三级| 国产精品久久久久影院亚瑟| 国产亚洲一二三区| 国产午夜久久久久| www国产成人免费观看视频 深夜成人网| 欧美一区二区三区的|