亚洲欧美国产日本一区二区,中文字幕人妻精品一区二区 ,波多野结高清视频在线播放

本文將總結(jié)Google Map API使用中最簡(jiǎn)單也是最常用的一些操作以及相關(guān)的概念。如果你需要更加詳細(xì)的信息，那么最好直接詳細(xì)地閱讀Google提供的關(guān)于Map的文檔.

在頁(yè)面中引入Google Map 服務(wù)

在使用Google Map服務(wù)之前，我們必須在我們的頁(yè)面中引入響應(yīng)的腳本，在頁(yè)面中插入：

<script type="text/javascript"
  src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>

其中sensor參數(shù)用于指明此應(yīng)用程序是否使用傳感器確定用戶(hù)的位置。

異步加載Google Map API

我們也可以在需要使用Google Map服務(wù)的時(shí)候動(dòng)態(tài)地添加資源，并指定回調(diào)函數(shù)：

   function initialize() {
          var myLatlng = new google.maps.LatLng(-34.397, 150.644);
          var myOptions = {
          zoom: 8,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function loadScript() {
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
          document.body.appendChild(script);
  }

  window.onload = loadScript;

注意其中使用callback參數(shù)指定了回調(diào)函數(shù)名，其原理同JSONP

初始化Google Map對(duì)象

所有需要在頁(yè)面中顯示地圖視圖的行為都必須以初始化一個(gè)Map對(duì)象為起點(diǎn)。每個(gè)Map對(duì)象的顯示都需要指定一個(gè)頁(yè)面中的dom結(jié)構(gòu)作為容器，并給定一定的配置，如下面的代碼所示：

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

其中，map對(duì)象將id為map_canvas（主要，dom容器只要是一般的div等容器就可以）作為容器，并指定了初始化配置信息。上例中的配置信息包括：

zoom：地圖的縮放級(jí)別
center：地圖中心位置
mapTypeId：用戶(hù)指定地圖顯示類(lèi)別

位置對(duì)象LatLng

在Google Map API使用中，我們經(jīng)常需要對(duì)經(jīng)緯度坐標(biāo)進(jìn)行操作，而所有的操作都會(huì)被封裝成LatLng對(duì)象，其構(gòu)造方法為:

var myLatlng = new google.maps.LatLng(維度(latitude), 經(jīng)度(longitude));

地圖顯示常用操作

有了Map對(duì)象后，我們可以通過(guò)調(diào)用其方法對(duì)地圖的顯示做調(diào)整，下面介紹常用的幾個(gè)方法：

setCenter(LatLng) 設(shè)置地圖顯示中心的位置
setZoom（Number）設(shè)置地圖的縮放級(jí)別
fitBounds(LatLngBounds) 使得地圖顯示適應(yīng)指定的包圍盒…(翻譯的不好，就是使得一個(gè)指定的矩形區(qū)域能在地圖中顯示出來(lái))

其中fitBounds方法在我們需要在地圖上顯示多個(gè)結(jié)果的時(shí)候非常有用。使用方法也非常簡(jiǎn)單。

假設(shè)我們現(xiàn)在有這么寫(xiě)個(gè)坐標(biāo)位置：

var beaches = [
          ['Bondi Beach', -33.890542, 151.274856, 4],
          ['Coogee Beach', -33.423036, 151.259052, 5],
          ['Cronulla Beach', -34.028249, 121.157507, 3],
          ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
          ['Maroubra Beach', -33.450198, 151.259302, 1]
];

那么我們只須先構(gòu)造一個(gè)空的Bounds對(duì)象，然后將這些坐標(biāo)一一添加進(jìn)這個(gè)Bounds就能得到一個(gè)同時(shí)包含這里所有點(diǎn)的Bounds了:

   var bounds = new google.maps.LatLngBounds();
  var beach;
  var latLng;
  var i;
    for ( i = 0; i < beach = beaches[ i ]; i++ ) {

          latLng = new google.maps.LatLng(beach[1], beach[2]);
          Bounds.extend( latLng );
      }
      

其中extend的作用就是擴(kuò)展Bounds以使得給定的坐標(biāo)位置被包含進(jìn)去。

向地圖中添加圖標(biāo)

本快內(nèi)容主要分為兩塊，添加標(biāo)記Marker和添加信息窗口infoWindow，

添加標(biāo)記

每個(gè)標(biāo)記都是一個(gè)google.maps.Marker對(duì)象，在實(shí)例化時(shí)需要給定一定的配置信息，如標(biāo)記的位置。下面的例子中直接在配置信息中制定了顯示的Map對(duì)象。我們也可以通過(guò)Marker對(duì)象的setMap方法來(lái)制定顯示在那個(gè)map實(shí)例中。要隱藏標(biāo)記時(shí)，只需設(shè)置setMap(null)便可:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
      var myOptions = {
  zoom: 4,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hello World!"
      });
      

添加信息窗口

每個(gè)信息窗口都是一個(gè)google.maps.InfoWindow對(duì)象，在實(shí)例化時(shí)需要給定一定的配置信息，如窗口中的內(nèi)容，標(biāo)記的位置。

其中需要說(shuō)明的是，配置信息中的content即可以是html字符串，也可以是一個(gè)dom節(jié)點(diǎn)。要讓一個(gè)信息窗口顯示出來(lái)，我們可以調(diào)用它的open方法，并制定顯示在那個(gè)Map實(shí)例對(duì)象中。注意，如果在信息窗口構(gòu)造時(shí)的配置中已經(jīng)制定了位置（通過(guò)position字段），那么直接使用infoWindow.open( map )，就可以顯示在地圖的制定位置上。當(dāng)然，我們也可以將信息窗口的顯示綁定在已經(jīng)在地圖中的標(biāo)記對(duì)象中，只需在open的第二個(gè)參數(shù)中制定標(biāo)記對(duì)象即可infoWindow.open( map, marker )，如下面代碼中所示：

   var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
          zoom: 4,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var contentString = 'Hello World';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Uluru (Ayers Rock)"
  });

  google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
  });

事件綁定

使用google.maps.event.addListener()方法來(lái)進(jìn)行事件的監(jiān)聽(tīng)。該方法接受三個(gè)參數(shù)：一個(gè)對(duì)象，一個(gè)待偵聽(tīng)事件以及一個(gè)在指定事件發(fā)生時(shí)調(diào)用的函數(shù)。

舉幾個(gè)例子，更加詳細(xì)的介紹參考文檔。

監(jiān)聽(tīng)地圖的縮放：

google.maps.event.addListener(map, 'zoom_changed', function() {
  /* 狀態(tài)改變時(shí)間不提供回調(diào)參數(shù)，我們需要去手動(dòng)獲取數(shù)值，比如利用map.getZoom()來(lái)獲取當(dāng)前的縮放級(jí)別 */
      });

標(biāo)記的點(diǎn)擊：

google.maps.event.addListener( marker, 'click', function( event) {
  placeMarker(event.latLng);
      });

監(jiān)聽(tīng)dom事件:

google.maps.event.addDomListener(window, 'load', initialize);

另外關(guān)于事件需要補(bǔ)充的一點(diǎn)是，當(dāng)我們初始化map的時(shí)候，其div為不顯示的，之后通過(guò)某種邏輯過(guò)程顯示出來(lái)時(shí)，其地圖在容器中的顯示會(huì)出現(xiàn)不完整的情況，這時(shí)候我們需要告訴組件去重新設(shè)置顯示區(qū)域的大小：

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, ‘resize’)

地址解析

Google Map API 本身已經(jīng)提供了非常方便的地址解析與反地址解析的方法，使用方法非常簡(jiǎn)單：

實(shí)例化一個(gè)google.maps.Geocoder對(duì)象，調(diào)用Geocoder.geocode()方法，在其回到中獲取結(jié)果：

   geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
          /* do somethind */
          } else {
          alert("Geocode was not successful for the following reason: " + status);
          }
    });

此處介紹一些第一個(gè)參數(shù)中最重要的兩個(gè)字段，根據(jù)不同的搜索需求，我們每次只需要給定其中一個(gè)參數(shù)即可:

address (required*) — 你需要解析的地址
latLng (required*) — 你需要解析的LatLng對(duì)象

兩種方式的結(jié)果返回值格式都一致，具體格式可以看文檔

一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

Google Map JavaScript API v3 常用功能總結(jié)

Google Map JavaScript API V3 常用功能總結(jié)