免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

網站建設中如何引入谷歌地圖代碼?

2016-01-26    分類： 網站建設

在建設網站中用到地圖是很常見的，在國內大部分都是用百度地圖，但是有時候可能會用到國外地址，這時候就只能使用谷歌地圖了，下面就介紹常用網站中使用谷歌地圖方法集合。

一，使用框架引入谷歌地圖

用框架引入谷歌地址是最簡單的方法，不是專業開發人員也可以操作。登陸ditu.google.cn地圖，輸入地址信息，如："成都東方明珠"，把地圖移動到合適的視角，點擊分享鏈接后，有兩個信息。第一個是一個網址，用于在瀏覽器中打開的；第二個是一個框架的代碼，網站中通常使用這個代碼。把代碼復制到網站中去就可以了，里面可以自己設定度度，高度，語言等信息。

谷歌地圖說明.jpg

二，使用谷歌地圖api開發

Api開發必須要專業人員才可以的，要會javascript,和簡單的html。

谷歌地圖api開發文檔寫的很全（如果打不開請使用fanqiang軟件）：

說明文檔：https://developers.google.com/maps/documentation/javascript/tutorial;

方法調用說明：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/

文檔寫的很詳細，要是全部閱讀下來至少要花幾個月以上時間，對于不是全部依賴地圖的網站來說太多了，下面我們就，海外房地產用到地圖來演示。

1，首頁我們要在網頁中引入谷歌的javascript包：

<script src="http://maps.google.cn/maps/api/js?v=3.exp&sensor=false"></script>
注意：官方給出的是：https://maps.googleapis.com/maps/api/js 但是因為谷歌被屏蔽的原因國內使用這個谷歌api打不開，所以建議使用google.cn這個引用地址

2，地圖函數

function initialize() {
var myLatlng = new google.maps.LatLng(32.9556728100,112.5659179688);//谷歌坐標地址
var mapOptions = {
zoom: 14,//這里是地圖的放大縮小
: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '這是我的地方'//坐標點提示
});
}
調用函數很簡單，只有一個函數，大致意思解釋一下：
var myLatlng = new google.maps.LatLng(32.9556728100,112.5659179688);后面的一串數字就是坐標點。
如何獲取坐標點呢？
右上角有個"google實驗室"里面有個顯示經緯度，啟用。然后鼠標放在地圖上找到點后右擊選擇"放置經緯度標記"，然后就可以復制了。如下圖：
谷歌地圖說明2.jpg

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '這是我的地方'//坐標點提示
});
這段函數是在需要的位置上加個紅色的標記，title是鼠標放在上面顯示的文字，這個大部分都會用到的，如果不需要把上面那段代碼刪除即可。
2，html中需有一個dom給地圖展示的，在div上添加一個id為"map-canvas"即可，如：<div id="map-canvas"></div>

3，函數寫完以后，在頁面加載好以后執行函數就可以了，可以在body里添加onload="initialize()"，也可以放在jquery的ready函數里

下面給出完整的示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>谷歌地圖調用</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 999px;
width:600px;
margin: 0px;
padding: 0px
}
</style>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(32.9556728100,112.5659179688);//谷歌坐標地址
var mapOptions = {
zoom: 14,
: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '這是我的地方'//坐標點提示
});
}
</script>
</head>
<body onload="initialize()">
<div id="map-canvas"></div>
</body>
</html>

如果一個網站中有多處使用地圖如何使用呢？這里我建議大家建立一個單獨的文件，用于顯示地圖的，如在根目錄建議一個map.php，在iframe引用的時候傳入坐標點，和標記即可。

下面我給出了個地圖調用鏈接，如果你不想寫代碼的話也可以直接調用的：

http://newbst.com/demo/map/index.php?zuobiao=32.9556728100,112.5659179688&title=谷歌地圖標記

如果覺得要獲取坐標太麻煩，有沒有直接傳入地址就顯示的呢？

谷歌地圖這方面做的很全，很好。谷歌地圖給出了geocoder方向，也就是說通過地址去獲取坐標。那這樣就簡單很多了，但是美中不足的是在內地有時候打不開。此刻你是不是有種*****(此處省略一萬字)，

可以試著訪問：http://newbst.com/demo/map/map2.php?address=中國成都

把后面的地址改成你的地址看看是不是就獲取到了呢？具體代碼右擊源文件就看到了，這里就不做深入講解了。

這里大家簡單的介紹一些常用的功能，如果你要深入開發，還需要對官方的開發文檔仔細閱讀。

當前文章：網站建設中如何引入谷歌地圖代碼?
分享URL：http://newbst.com/news43/33193.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

成都網站建設