精品国产香蕉在线观看_日韩黄色视频手机版_草莓免费在线观看_爽 好多水 快进来免费_2012中文字幕视频完整版_久久精品这里热只有精品_亚洲毛片网站大全_中文字幕在线观看电影_国产18禁黄网站禁片免费观看_麻豆99激情视频在线播放

全國統(tǒng)一咨詢熱線：18609840880

網(wǎng)站建設(shè)中如何引入谷歌地圖代碼?

2018-10-26 15:46:34

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

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

用框架引入谷歌地址是簡單的方法，不是專業(yè)開發(fā)人員也可以操作。登陸ditu.google.cn地圖，輸入地址信息，如："大連東方明珠"，把地圖移動(dòng)到合適的視角，點(diǎn)擊分享鏈接后，有兩個(gè)信息。先進(jìn)個(gè)是一個(gè)網(wǎng)址，用于在瀏覽器中打開的；第二個(gè)是一個(gè)框架的代碼，網(wǎng)站中通常使用這個(gè)代碼。把代碼復(fù)制到網(wǎng)站中去就可以了，里面可以自己設(shè)定度度，高度，語言等信息。

二，使用谷歌地圖api開發(fā)

Api開發(fā)必須要專業(yè)人員才可以的，要會(huì)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ì)，要是全部閱讀下來至少要花幾個(gè)月以上時(shí)間，對于不是全部依賴地圖的網(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 但是因?yàn)楣雀璞黄帘蔚脑驀鴥?nèi)使用這個(gè)谷歌api打不開，所以建議使用google.cn這個(gè)引用地址

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ǎn)提示
  });
}
調(diào)用函數(shù)很簡單，只有一個(gè)函數(shù)，大致意思解釋一下：
var myLatlng = new google.maps.LatLng(32.9556728100,112.5659179688);后面的一串?dāng)?shù)字就是坐標(biāo)點(diǎn)。
如何獲取坐標(biāo)點(diǎn)呢？
右上角有個(gè)"google實(shí)驗(yàn)室"里面有個(gè)顯示經(jīng)緯度，啟用。然后鼠標(biāo)放在地圖上找到點(diǎn)后右擊選擇"放置經(jīng)緯度標(biāo)記"，然后就可以復(fù)制了。如下圖：
 
 
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: '這是我的地方'//坐標(biāo)點(diǎn)提示
  });
這段函數(shù)是在需要的位置上加個(gè)紅色的標(biāo)記，title是鼠標(biāo)放在上面顯示的文字，這個(gè)大部分都會(huì)用到的，如果不需要把上面那段代碼刪除即可。
2，html中需有一個(gè)dom給地圖展示的，在div上添加一個(gè)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)點(diǎn)提示
  });
}
</script>
  </head>
  <body onload="initialize()">
    <div id="map-canvas"></div>
  </body>
</html>
 

如果一個(gè)網(wǎng)站中有多處使用地圖如何使用呢？這里我建議大家建立一個(gè)單獨(dú)的文件，用于顯示地圖的，如在根目錄建議一個(gè)map.php，在iframe引用的時(shí)候傳入坐標(biāo)點(diǎn)，和標(biāo)記即可。

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

http://qgwk.com.cn/demo/map/index.php?zuobiao=32.9556728100,112.5659179688&title=谷歌地圖標(biāo)記

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

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

可以試著訪問：http://qgwk.com.cn/demo/map/map2.php?address=中國大連

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

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