如何制作自己的第一个google地图样例源码详细介绍

最新推荐文章于 2024-02-06 16:32:46 发布

eagleking012

最新推荐文章于 2024-02-06 16:32:46 发布

阅读量169

点赞数

文章标签： javascript xhtml python ViewUI

以下为一个完整的html文件源码,初学者可以直接保存到本地进行测试，建议初学者分三步来学习谷歌地图

1、找样例看源码和效果。

2、找工具文章，试着自己改改。

3、查官方接口文档，设计自己的应用。

以下源码中提供了工具文章和官方文档的地址，希望对初学者有用，共同学习吧^_^

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google 地图 JavaScript API 示例: 简单地址解析</title>  <script src="http://ditu.google.cn/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></script> <script type="text/javascript">   var map; var geocoder; var address; function initialize() { if (GBrowserIsCompatible()) { var options = { listingTypes : "kmlonly" };//设置地图的大小,加载的地图类型默认第一个, var options = {size:new GSize(1200, 700),mapTypes:[G_SATELLITE_MAP,G_NORMAL_MAP,G_PHYSICAL_MAP]}; //map = new GMap2(document.getElementById("map_canvas"),{ size: new GSize(1200,700), mapTypes:[G_SATELLITE_MAP,G_NORMAL_MAP,G_PHYSICAL_MAP]} ); map = new GMap2(document.getElementById("map_canvas"),options); map.disableGoogleBar();//禁用谷歌搜索栏 map.setCenter(new GLatLng(39.992911,116.396463), 16);//设置坐标和放大倍数 //这里点击显示地址 map.addControl(new GSmallMapControl()); GEvent.addListener(map, "click", getAddress); geocoder = new GClientGeocoder(); var customUI = map.getDefaultUI(); customUI.maptypes.hybrid = true; map.setUI(customUI); //map.enableGoogleBar(); } } function getAddress(overlay, latlng) { if (latlng != null) { address = latlng; geocoder.getLocations(latlng, showAddress); } } function showAddress(response) { map.clearOverlays(); if (!response || response.Status.code != 200) { alert("你点击的这个地方还没有准确地址!"+"状态码（Status Code）:" + response.Status.code); } else { //alert(response.responseText); place = response.Placemark[0]; point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml( '<div style="font-size:13px;">' + '<b>当前点击的地址:</b><br/>' + place.address + '<br/>' + '<b>坐标：</b>'+place.Point.coordinates[1]+' '+place.Point.coordinates[0]+'<br/>' + '<b>准确度:</b>' + place.AddressDetails.Accuracy + '' + '<b>国家代码:</b> ' + place.AddressDetails.Country.CountryNameCode) + '</div>'; } } //地理位置解析*********************************************************************************************** function $(id){return document.getElementById(id);} function addAddressToMap(response) { map.clearOverlays(); if (!response || response.Status.code != 200) { alert("不能解析这个地址"); } else { place = response.Placemark[0]; point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(getGeocodeHtml(response)); } } function getGeocodeHtml(response){ var html = "<div style='font-size:13px'>"; html += "<b>搜索目标：</b>"+response.name; // html += "<br/><b>结果状态：</b>"+response.Status.code; if(response.Placemark){ for (var i = 0, place; place = response.Placemark[i]; i++) { //var s="";for(var elem in place.Point.coordinates) //s+=elem+":"+place[elem]+"\n"; //alert(s); html += "<br/><b>地址：</b>"+place.address; if(place.AddressDetails.Country)html += "<br/><b>国家代码：</b>"+place.AddressDetails.Country.CountryNameCode; html += "<br/><b>准确度：</b>"+place.AddressDetails.Accuracy; html += "<br/><b>坐标：</b>"+place.Point.coordinates[1]+" "+place.Point.coordinates[0]; } } html += "</div>"; return html; } function showLocation() { var address = $("q").value; geocoder.getLocations(address, addAddressToMap); } function findLocation(address) { $("q").value = address; showLocation(); updateURL(); } //地理位置解析*********************************************************************************************** </script> </head> <body οnlοad="initialize()" οnunlοad="GUnload()"> <div id="map_canvas" style="width: 800px; height: 600px; float: left"></div> <div> <b>目标地址/坐标：</b> <input type="text" id="q" value="请输入您要搜索的位置如: 北京市鸟巢" class="address_input" size="42" /> <input type="button" value="搜索" οnclick="showLocation();" /> </div> </body> </html>