Google Map API 使用總結

本文轉載自查看原文 2015-08-26 11:30 4946 谷歌地圖API/ js/ 工作效果插件/ javascript

Google Map API (一)：顯示一個最基本的地圖

1 實現一個地圖：
<head>中引用：

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

Html里面合適的位置定義：

<div id="map"/>

javascript文件:

window.onload = myLoad;
function myLoad()
{ 
    lat = 23.14746;
    lng = 113.34175376;
    var myLatLng = new google.maps.LatLng(lat, lng);
    var myOptions = {
        zoom: 15,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementByIdx_x("map"), myOptions);
}

說明：zoom參數是地圖的范圍，參數越小，地圖的范圍就越大
center是地圖的中心點，通過經緯度定義
mapTypeId：是地圖的類型。有四種map可選，MapTypeId.ROADMAP， MapTypeId.SATELLITE，
MapTypeId.HYBRID，MapTypeId.TERRAIN。

此時就可以顯示中心點是（113，27）的地圖了

Google Map API(二)：代碼添加和刪除marker標記

Google Map API :在地圖通過代添加和刪除mark標記

 lat = 23.14746;
  lng = 113.34175376;
  var myLatLng = new google.maps.LatLng(lat, lng);
  var myOptions = {
      zoom: 15,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var map = new google.maps.Map(document.getElementByIdx_x_x("map_canvas"), myOptions);

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

  marker.setMap(map);

或者直接這樣定義一個marker：

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

去掉marker的操作是：

marker.setMap(null);

Google Map API (三)：給marker標記加上自定義內容

Google Map API Version3 中標記可以給marker加上任何自己的東西。
效果如下：

代碼:
首先還是定義一個marker：

 lat = 23.14746;
  lng = 113.34175376;
  var myLatLng = new google.maps.LatLng(lat, lng);
  var myOptions = {
      zoom: 15,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var map = new google.maps.Map(document.getElementByIdx_x_x_xx_x("map_canvas"), myOptions);

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

  marker.setMap(map);

然后給marker標記添加點擊事件和自定義內容：

var contentString = '<div id="content">' +'<div>' +
'</div>' +
'<h1>我的標簽</h1>' +
'<div id="bodyContent">' +
'<p class = "mapStyle">我的淘寶 <a href="http://ggydggyd.taobao.com">http://ggydggyd.taobao.com</a>' +
'</div>' +
'</div>';

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

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

infowindow是google指定的現實內容的類，你用HTML代碼初始化它就好了
mapStyle是自己定義的樣式，在這里可以使用網頁的css樣式表

Google Map API (四)：地圖控件的自定義

navigationControl：

mapTypeControl：

scaleControl：

具體定義的方式是：

lat = 23.14746;
lng = 113.34175376;

var myLatLng = new google.maps.LatLng(lat, lng);

var myOptions = {
    zoom: 15,
    center: myLatLng,
    disableDefaultUI: true,               //取消默認的試圖
    navigationControl: true,              //true表示顯示控件
    mapTypeControl: false,                //false表示不顯示控件
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

通過這樣的定義可以讓控件顯示或者不顯示了。

空間也可以指定樣式和位置，主要是通過修改Options實現：

  var myOptions = {
        zoom: 15,
        center: myLatLng,
        disableDefaultUI: true,
        navigationControl: false,

        mapTypeControl: true,
        mapTypeControlOptions: { 
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_LEFT
 },
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

mapTypeControlOptions就是設定樣式來，style是樣式，google.maps.ControlPosition.TOP_LEFT是位置：

導航控件（navigationControl）可顯示為以下 style 選項之一：

google.maps.NavigationControlStyle.SMALL，用於顯示迷你縮放控件，其中僅限＋和－按鈕。此樣式適用於移動設備。
google.maps.NavigationControlStyle.ZOOM_PAN，用於顯示如 Google Maps 中所示帶有平移控件的標准縮放滑塊控件。
google.maps.NavigationControlStyle.ANDROID，用於顯示 Android 設備上的本地 Google Maps 應用程序中所使用的小型縮放控件。
google.maps.NavigationControlStyle.DEFAULT，會根據地圖的尺寸和運行地圖的設備挑選合適的導航控件。

MapType 控件可顯示為以下 style 選項之一：

google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用於在水平欄中將一組控件顯示為如 Google Maps 中所示按鈕。
google.maps.MapTypeControlStyle.DROPDOWN_MENU，用於顯示單個按鈕控件，以便您從下拉菜單中選擇地圖類型。
google.maps.MapTypeControlStyle.DEFAULT，用於顯示“默認”的行為，該行為取決於屏幕尺寸，並且可能會在 API 以后的版本中有所變化。

可以定義的位置是：

TOP 表示控件應沿着地圖頂部中心放置。
TOP_LEFT 表示控件應沿着地圖頂部左側放置，控件的任何子元素“流”向頂部中心。
TOP_RIGHT 表示控件應沿着地圖頂部右側放置，控件的任何子元素“流”向頂部中心。
BOTTOM 表示控件應沿着地圖底部中心放置。
BOTTOM_LEFT 表示控件應沿着地圖底部左側放置，控件的任何子元素“流”向底部中心。
BOTTOM_RIGHT 表示控件應沿着地圖底部右側放置，控件的任何子元素“流”向底部中心。
LEFT 表示控件應沿着地圖左側放置，位於使用 TOP_LEFT 定位方法放置的任何元素之下，控件的任何子元素“流”向底部。
RIGHT 表示控件應沿着地圖右側放置，位於使用 TOP_RIGHT 定位方法放置的任何元素之下，控件的任何子元素“流”向底部。

Google Map API(五)：定義路線和點擊事件

你可以在Google Map添加你想添加的線，並且為線添加點擊事件。
效果如下：

JS代碼：

window.onload = myLoad;

var poly;          //折線
var infoWindowPoly;          //折線顯示的窗口
var map;           //地圖

function myLoad() {
    lat = 23.14746;              //位置固定，你也可以通過其他方法得到坐標
    lng = 113.34175376;
    var myLatLng = new google.maps.LatLng(lat, lng);            //初始化一個坐標位置

    var myOptions = {
        zoom: 15,                   //縮放，數值越大地圖顯示的內容越具體
        center: myLatLng,              //地圖中心點
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    };

    map = new google.maps.Map(document.getElementByIdx_x_x_x_x("map"), myOptions);        //根據option初始化地圖

    var flightPlanCoordinates = [                        //添加一條線
    new google.maps.LatLng(23.14746, 113.34175376),
    new google.maps.LatLng(23.144, 113.345),
    new google.maps.LatLng(23.149, 113.349),
  ];
    poly = new google.maps.Polyline({                 //定義線的樣式
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 8
    });

    poly.setMap(map);                 //把線添加到地圖

    google.maps.event.addListener(poly, 'click', addLatLng);         //為線添加點擊事件

    infoWindowPoly = new google.maps.InfoWindow();              //初始化線的彈出框
}

function addLatLng(event) 
{
    var contentString = "<b>你點線啦</b><br />";
    contentString += "點擊位置: <br />" + event.latLng.lat() + "," + 

event.latLng.lng() + "<br />";

    infoWindowPoly.setContent(contentString);
    infoWindowPoly.setPosition(event.latLng);

    infoWindowPoly.open(map);                 //點擊線的時候顯示線的彈出框
}

總結代碼如下：

window.onload = myLoad;

var poly;          //折線
var infoWindowPoly;          //折線顯示的窗口
var map;           //地圖

function myLoad() {
    lat = 23.14746;              //位置固定，你也可以通過其他方法得到
    lng = 113.34175376;
    var myLatLng = new google.maps.LatLng(lat, lng);            //初始化一個坐標位置

    var myOptions = {
        zoom: 15,                   //縮放，數值越大地圖顯示的內容越具體
        center: myLatLng,              //地圖中心點
        disableDefaultUI: true,              //不使用默認圖標
        navigationControl: true,                 //顯示導航條

        mapTypeControl: true,
        mapTypeControlOptions: {
         style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,               //詳細的設置可參考：http://blog.sina.com.cn/s/articlelist_1289503967_4_1.html
         position: google.maps.ControlPosition.TOP_LEFT },
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP             //地圖類型，一共四種：可參考http://blog.sina.com.cn/s/articlelist_1289503967_4_1.html
    };

    map = new google.maps.Map(document.getElementById("map"), myOptions);        //根據option初始化地圖

    var marker = new google.maps.Marker({              //添加標記
        position: myLatLng,
        map: map,
        title: "Hello World!"
    });

    var contentString = '<div id="content">' +                 //點擊標記后顯示自定義的內容
    '<div>' +
    '</div>' +
    '<h1>我的標簽</h1>' +
    '<div id="bodyContent">' +
    '<p class = "mapStyle">我的淘寶 <a href="http://ggydggyd.taobao.com">http://ggydggyd.taobao.com</a>' +
    '</div>' +
    '</div>';

    var infowindow = new google.maps.InfoWindow({                //根據HTML初始化infowindow
        content: contentString
    });

    google.maps.event.addListener(marker, 'click', function () {      //添加點擊事件
        infowindow.open(map, marker);
    });


    var image = 'flag.png';                                       //自定義marker的圖標
    var myLatLng = new google.maps.LatLng(23.149, 113.349);
    var beachMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image
    });

    google.maps.event.addListener(beachMarker, 'click', function () {      //添加點擊事件
        infowindow.open(map,beachMarker );
    });


    var flightPlanCoordinates = [                        //添加一條線
    new google.maps.LatLng(23.14746, 113.34175376),
    new google.maps.LatLng(23.144, 113.345),
    new google.maps.LatLng(23.149, 113.349),
  ];
    poly = new google.maps.Polyline({                 //定義線的樣式
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 8
    });

    poly.setMap(map);                 //把線添加到地圖

    google.maps.event.addListener(poly, 'click', addLatLng);         //為線添加點擊事件

    infoWindowPoly = new google.maps.InfoWindow();              //初始化線的彈出框
}

function addLatLng(event) 
{
    var contentString = "<b>你點線啦</b><br />";
    contentString += "點擊位置: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";

    // Replace our Info Window's content and position
    infoWindowPoly.setContent(contentString);
    infoWindowPoly.setPosition(event.latLng);

    infoWindowPoly.open(map);                 //點擊線的時候顯示線的彈出框
}

在項目中只是用到了簡單的小部分，代碼：

function initialize(lo,la,idbox) {


        var myOptions = {

          zoom: 12,

          center: new google.maps.LatLng(lo,la), 
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false, //屏蔽衛星
         draggable: false, //禁止拖動


        };
        var map = new google.maps.Map(document.getElementById(idbox),
            myOptions);

        //machao 添加標記
        var myLatLng = new google.maps.LatLng(lo,la);    
        var marker = new google.maps.Marker({
            position:myLatLng,map:map,title:"Acura"  //提示文字
        });

        var zoomLevel;


}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Google Map Api 谷歌地圖接口整理 Google Map Api 谷歌地圖接口整理獲取google Map API Key方法通過google cloud API 使用 WaveNet 如何使用google地圖的api（整理）【android】【google map api v2】google 地圖 api v2 谷歌地圖開發經驗分享系列之一：Google Map API簡介 Google Map API v2 步步為營（二）----- Location Google Map Api V3 系列之導航(包括清除線路) 國內使用Google Maps JavaScript API