本来也没想到要学习下google map,由于项目需要,所以简单学习了下google map。
首先要加载google maps api,不然一切无从谈起,
<script type="text/javascript" src="http://maps/api/js?sensor=false"></script>
必须要设置 sensor 参数,以指明此应用程序是否使用传感器确定用户的位置。
然后编写地图函数,在进行加载。
simple map:
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(30.33,120.23);
var myOption = {
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('myMap'), myOption);
}
</script>
</head>
<body onload="initialize()">
<div id="myMap" style="width:600px;height:400px"></div>
</body>
</html>
也可以通过js事件加载:google.maps.event.addDomListener(window, 'load', initialize);
latlng对象是经纬度,mapTypeId有多种,具体google的挨批中有,一般主要使用ROADMAP。map就是地图对象,zoom参数指定显示地图的详细程度。
还可以为地图添加标记,信息窗口,事件等。
simple marker map:
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(30.3, 120.2);
var myOptions = {
zoom: 15,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var markerOption = {
position:latlng,
map:map,
title:"good"
}
var marker = new google.maps.Marker(markerOption);
google.maps.event.addListener(marker, 'click', function() {
if(map.getZoom() == 15) {
map.setZoom(10);
}else {
map.setZoom(15);
}
});
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position:position,
map:map
});
map.panTo(position);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
此代码可以在地图上任意添加marker。
simple window info map:
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(30.33,120.23);
var myOption = {
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('myMap'), myOption);
marker = new google.maps.Marker({
position:latlng,
map:map
});
var content = "good";
infowindow = new google.maps.InfoWindow({
content:content,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function hide() {
var cmd = document.getElementById("show").value;
if(cmd == "hide") {
infowindow.close();
document.getElementById("show").value = "show";
}else {
infowindow.open(map, marker);
document.getElementById("show").value = "hide";
}
}
</script>
</head>
<body onload="initialize()">
<div id="myMap" style="width:600px;height:400px"></div>
<div><input type="button" onclick="hide()" value="show" id="show"/></div>
</body>
</html>
此代码点击按钮可以显示marker上边的info window,也可以隐藏。
标记也可以通过自定义。
其实对于google map的学习,google maps api中已经提供相当的例子,可以通过解读源代码来学习。
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/
分享到:
相关推荐
**Google MAP 学习例程** Google Map API 是一套强大的工具,它允许开发者在自己的网站或应用程序中嵌入交互式的地图功能。这个“Google MAP 学习例程”旨在帮助你深入理解和掌握Google Map V3 API,从而能够利用它...
**谷歌地图API学习笔记** 谷歌地图API(Google Maps API)是一种强大的工具,允许...通过阅读《google map学习文档.doc》,可以深入学习这些概念并实践应用,逐步掌握谷歌地图API的使用,构建功能丰富的地图应用。
在IT行业中,GoogleMap是一个广泛使用的地图服务,它提供了丰富的API接口,允许开发者在其应用...开发者可以通过学习和分析这个demo,掌握如何在自己的项目中有效利用GoogleMap API,提升地图应用的用户体验和功能性。
通过学习谷歌地图API,你可以创建定制的地图,添加标记、路径、信息窗口,甚至进行复杂的地理编码和路线规划。下面将详细介绍谷歌地图API的一些关键知识点。 首先,你需要在Google Developers Console中注册一个...
在IT领域,Google Map是一款广泛使用的在线地图服务,它提供了丰富的功能,如定位、导航、路线规划、街景查看等。本应用实例将探讨如何利用Google Map API在离线环境中实现地图服务,这对于那些网络不稳定或者需要在...
开发者可以解压后研究其结构,学习如何将ExtJs和Google Maps API结合使用,从而提升自己的地图应用开发能力。总的来说,Ext Google Map简易开发框架为开发者提供了一个高效、灵活的工具,用于构建具有高级功能的交互...
Google Map API 是一款强大的工具...通过学习和实践这些示例,你可以熟练掌握 Google Map API 的基础和高级功能,从而在各种项目中灵活应用。记住,始终要关注 API 的使用限制和最佳实践,以确保服务的稳定性和高效性。
public void onMapReady(GoogleMap googleMap) { // 在这里,你可以对地图进行各种定制,如添加标记、路径等 GoogleMap map = googleMap; map.getUiSettings().setZoomControlsEnabled(true); map....
var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: myLatLng }); } ``` 这段代码会在ID为`map`的`div`元素内显示一个中心位于澳大利亚悉尼的地图,缩放级别为8。 谷歌地图API...
总的来说,"基于Google Map API的简单地图"项目涵盖了定位用户、地图操作和标记地点等基本功能,通过学习和实践,开发者可以构建出更加丰富和交互性强的地图应用。Google Map API的强大和灵活性使其成为开发地图应用...
public void onMapReady(GoogleMap googleMap) { // 在这里可以进行地图操作,比如设置初始位置、添加标记等 } }); ``` 在`onMapReady`回调中,你可以访问到GoogleMap对象,从而调用各种方法来定制地图,如设置...
在Android布局文件中添加MapView组件,通过设置API密钥和初始化GoogleMap对象,可以实现在应用中展示地图。同时,可以通过调整Zoom级别来控制地图的缩放程度,使用CameraPosition和CameraUpdateFactory来改变视图...
同google map的geoserver用sld geoserver用的,可以拿来学习,也可以直接使用,覆盖掉原先的geoserver自带的sld就可以了 画出来的效果不错的说o(∩_∩)o...
Google Map API是一个...通过学习和分析这个源代码,开发者不仅可以了解Google Map API的基础用法,还能掌握高级特性和最佳实践。源代码中的注释和示例将有助于快速理解各个功能的实现,从而在自己的项目中灵活应用。
这个描述简洁明了,表明了源码是关于GoogleMap地图控件的实现,可能是用某种编程语言(如Java、JavaScript、C#等)编写,目的是帮助开发者理解和学习如何在实际项目中应用。源码通常包括了地图的加载、标记设置、...
4. **地图初始化**:在Activity或Fragment中创建GoogleMap对象,通过setMapType、setMyLocationEnabled等方法设置地图样式和显示用户位置。 5. **轨迹记录**:使用LocationManager和LocationListener监听位置变化,...
var map = new google.maps.Map(document.getElementById('map'), { center: location, zoom: 8 }); } ``` 在上述代码中,我们创建了一个新的地图对象,并将其放置在ID为`map`的HTML元素内,设置了中心位置为...
public void onMapReady(GoogleMap googleMap) { // 这里可以进一步配置地图,比如设置缩放级别、启用定位等 } }); ``` 不忘在其他生命周期方法(如onResume(), onPause(), onDestroy())中调用对应的方法。 ...
"matlab"指明了编程语言,"algorithm"暗示了该程序包可能包含用于处理地图数据的算法,而"googlemap"和"map"则直接指出其与谷歌地图和地图操作相关。 在压缩包中,有两个文件:“license.txt”和“get_google_map”...
在IT行业中,Google Map API 和 ASP.NET(C#)的结合应用是构建地理位置服务的重要技术组合。Google Map API 提供了丰富的地图展示和地理定位功能,而ASP.NET(C#)则是一个强大的Web应用程序开发框架,两者结合可以创建...