google map api 3 学习应用笔记 （1）
Google Maps JavaScript API V3 - 基础知识
1.Google Maps上的Hello World
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <mce:script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" mce_src="http://maps.google.com/maps/api/js?sensor=false"></mce:script> <mce:script type="text/javascript"><!-- function initialize() { var latlng = new google.maps.LatLng(43.90916766310586, 125.32416496276856); //初始化地点 var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; //初始化 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //getElementById根据div id获取 地图位置 } // --></mce:script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"> </div> </body> </html>
2. google Maps 上添加控件
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <mce:script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" mce_src="http://maps.google.com/maps/api/js?sensor=false"></mce:script> <mce:script type="text/javascript"><!-- var starMarker; //开始点的标记 var taxiImg = "css/taxi.png"; var startCenter = new google.maps.LatLng(43.90916766310586, 125.32416496276856); //起始地址 var map; //地图 function initialize() { //MAP Option定义 var myOptions = { zoom: 15, center: startCenter, scrollwheel: false, disableDoubleClickZoom: true, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, //navigationControl: true navigationControlOptions:{style:google.maps.NavigationControlStyle.ANDROID,position: google.maps.ControlPosition.BOTTOM} }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } // --></mce:script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"> </div> </body> </html>
3. 添加一个标记
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <mce:script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" mce_src="http://maps.google.com/maps/api/js?sensor=false"></mce:script> <mce:script type="text/javascript"><!-- var starMarker; //开始点的标记 var taxiImg = "css/taxi.png"; var startCenter = new google.maps.LatLng(43.90916766310586, 125.32416496276856); //起始地址 var map; //地图 function initialize() { //MAP Option定义 var myOptions = { zoom: 15, center: startCenter, scrollwheel: false, disableDoubleClickZoom: true, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, //navigationControl: true navigationControlOptions:{style:google.maps.NavigationControlStyle.ANDROID,position: google.maps.ControlPosition.BOTTOM} }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //标记开始节点------------------------------------------ var starMarker = new google.maps.Marker({ position: startCenter, map: map, // icon: taxiImg, title: "开始地址[长春火车站]" }); } // --></mce:script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"> </div> </body> </html>