Google Map API 使用總結

時間 2019-11-09

標籤 google map api 使用總結欄目 Google 简体版

原文原文鏈接

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

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

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

Html裏面合適的位置定義：html

<div id="map"/>

javascript文件:java

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。canvas

此時就能夠顯示中心點是（113，27）的地圖了api

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

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

 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：code

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

去掉marker的操做是：htm

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;


}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。