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
};
mapTypeControlOption
s就是設定樣式來,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;
}