google map学习 博客分类: JS area google mapjs
程序员文章站
2024-02-14 11:38:28
...
本来也没想到要学习下google map,由于项目需要,所以简单学习了下google map。
首先要加载google maps api,不然一切无从谈起,
<script type="text/javascript" src="http://maps/api/js?sensor=false"></script>
必须要设置 sensor 参数,以指明此应用程序是否使用传感器确定用户的位置。
然后编写地图函数,在进行加载。
simple map:
也可以通过js事件加载:google.maps.event.addDomListener(window, 'load', initialize);
latlng对象是经纬度,mapTypeId有多种,具体google的挨批中有,一般主要使用ROADMAP。map就是地图对象,zoom参数指定显示地图的详细程度。
还可以为地图添加标记,信息窗口,事件等。
simple marker map:
此代码可以在地图上任意添加marker。
simple window info map:
此代码点击按钮可以显示marker上边的info window,也可以隐藏。
标记也可以通过自定义。
其实对于google map的学习,google maps api中已经提供相当的例子,可以通过解读源代码来学习。
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/
首先要加载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 Android API V1中API Key的生成 博客分类: Android androidMapViewapiKeygoogle map
-
google map学习 博客分类: JS area google mapjs
-
google地图demo 博客分类: FY_Android androidgooglegoogle map地图
-
如何在没有内置Google Map APIs的Android手机上安装程序 博客分类: Android AndroidGoogle Map
-
google map proj. 博客分类: google map mapgoogle
-
google map proj. 博客分类: google map mapgoogle