Google Maps JavaScript API V3常用方法
<body onload="initialize()"> <div id="map_canvas" style="width:700px; height:500px;"></div> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- js code --> </body>
二、常用方法
1.获取点击处经纬度坐标
2.可视区域经纬度坐标范围
1.获取点击处经纬度坐标
<script type="text/javascript"> function initialize(){ var myOptions = { center : new google.maps.LatLng(26.085963630752868, 119.29929775619507),//纬度,经度 zoom : 15, mapTypeId : google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, navigationControl : true, mapTypeControl : true, scaleControl : true }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, "click", function(event) { var point = event.latLng; alert("点坐标:(" + point.lng() + "," + point.lat() + ")"); }); } </script>
2.可视区域经纬度坐标范围
<script type="text/javascript"> function initialize(){ var myOptions = { center : new google.maps.LatLng(26.085963630752868, 119.29929775619507), zoom : 15, mapTypeId : google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, navigationControl : true, mapTypeControl : true, scaleControl : true }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, "click", function(event) { var bounds = map.getBounds(); var point1 = bounds.getNorthEast(); var point2 = bounds.getSouthWest(); alert("东北角:(" + point1.lng() + "," + point1.lat() + ")\r\n西南角:(" + point2.lng() + "," + point2.lat() + ")"); }); } </script>
3.鼠标移到标记显示标记信息
5.自定义控件
<script type="text/javascript"> function initialize(){ var point = new google.maps.LatLng(26.085963630752868, 119.29929775619507); var myOptions = { center : point, zoom : 15, mapTypeId : google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, navigationControl : true, mapTypeControl : true, scaleControl : true }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position : point, map : map, title : "东街口" }); //marker.setMap(map); //MarkerOptions中设置map属性则不需再调用setMap方法 var infowindow = new google.maps.InfoWindow({ content : "木子屋<hr>个人博客。[<a href='http://www.mzwu.com/' target='_blank'>进入网站</a>]" }); google.maps.event.addListener(marker, "mouseover", function(event) { infowindow.open(map, marker); }); } </script>4.地址解析成经纬度信息
<script type="text/javascript"> var map; function initialize(){ var myOptions = { center : new google.maps.LatLng(26.085963630752868, 119.29929775619507), zoom : 15, mapTypeId : google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, navigationControl : true, mapTypeControl : true, scaleControl : true }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function codeAddress(address) { var geocoder = new google.maps.Geocoder(); geocoder.geocode({"address": address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { for(var i=0;i<results.length;i++){ map.setCenter(results[i].geometry.location); var marker = new google.maps.Marker({map: map,position: results[i].geometry.location}); alert("lng:"+results[i].geometry.location.lng() + "\r\nlat:" + results[i].geometry.location.lat()); } } else { alert("Geocode was not successful for the following reason: " + status); } }); } setTimeout(function(){codeAddress("福建省福州市鼓楼区");}, 3000); </script>
5.自定义控件
<script type="text/javascript"> function initialize(){ var myOptions = { center : new google.maps.LatLng(26.085963630752868, 119.29929775619507), zoom : 15, mapTypeId : google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //自定义控件 var homeControlDiv = document.createElement("DIV"); homeControlDiv.style.paddingTop = "5px"; var controlUI = new Image(); controlUI.src = "http://www.mzwu.com/pic/201105/027.gif"; homeControlDiv.appendChild(controlUI); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); //注意是用addDomListener google.maps.event.addDomListener(controlUI, "click", function(){ alert("被你发现了^_^"); }); } </script>
相关推荐
Google Maps Javascript API V3 Reference 适用于页面调用谷歌地图,弹出窗口等功能
[免费]Google Maps JavaScript API V3中文版参考手册.rar [免费]Google Maps JavaScript API V3中文版参考手册.rar
Google Maps JavaScript API V3 详细教程
Google Maps JavaScript API V3应用
google Maps JavaScript API V3 参考
Google Maps JavaScript API V3中文版参考手册
The Google Maps Javascript API V3
Google Maps JavaScript API V3 自用版本
用于 JavaScript 的 Google Maps API V3 中文参考文档 与官网文档格式基本相同
中文版 API V3 Google_Maps_JavaScript_API_V3_教程 开发或者二次开发google 地图必须文档
最近在研究GOOGLEMAP~短暂学习后发现最有用的资源~
Google Maps JavaScript API v3实用程序 描述 在该项目中,您可以找到为Google Maps JavaScript API V3开发的实用程序包。 文献资料 以下实用程序包的文档可以在找到。 配套 注意:许多软件包正被移至单个存储库,并...
Google Maps JavaScript API V3 中文参考手册,详细解说每个函数的功能。
Google Maps JavaScript API V3 版,现在是正式的 JavaScript API 版本
用网上的中文版来改的,与其相比就是把它改成了Html版,有锚点(点击类名可快速滚动到类介绍),浏览更方便,速度更快/不卡, 但也存在同样问题,版本较老,有些类没有,只适合于大体查看,需要与官方最新的对比起用, 对于我来...
Dart Google地图 该项目是一个库,可使用来自dart脚本的 。 用法 要在您的代码中使用此库: ... 有关获取API密钥的信息,请参阅Google Maps JavaScript API v3 。 一个非常: import 'dart:html' ; impor
适用于Google Maps JavaScript API v3的Supercluster适配器 适用于Google Maps JavaScript API v3的Supercluster适配器为Google Maps提供了的功能,该功能是一个非常快速的地理空间点群集库。 该库接受标准的GeoJSON...
它只是一个纯 JavaScript 代码,不依赖于除 Google Maps JavaScript API V3 之外的任何外部库。 见。 用法 本页简要说明了如何使用动力学滚动。 我们假设您创建了 Google Map 实例并且它由变量map引用。 要向map...
js-googlemap-infobox InfoBox扩展了Google Maps JavaScript API V3 OverlayView类。 版本 1.1.13 [2014年3月19日] 作者 加里·利特尔
谷歌地图最新版(第三版)开发api工具 第三版API的主要功能有: 1、支持Chrome、iPhone Safari和Android手机上使用。 2、不在需要API keys,这样用户可以将代码集成进入RSS阅读器,并且不会出现错误。 3、...