您的位置：首页 > 编程语言 > Go语言

google map api 3 学习应用笔记（1）

2010-10-09 11:09 567 查看

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>

当地图发布时，v3不用注册key，但sensor 参数也必须明确指明true 或 false，否则地图不能被加载

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

google map api 3 学习应用笔记 （1）

Google Maps JavaScript API V3 - 基础知识

google map api 3 学习应用笔记（1）