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

`

eagleking012

浏览: 24438 次
性别:
来自: 北京

最近访客更多访客>>

nlskyfree

春春哥哥

wln888

odinyu

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (26)

社区版块

存档分类

最新评论

LeiXX：请问一下：通过pop3服务器访问邮件，异地登录的时候会有验证信 ...
利用JavaMail通过POP3协议、IMAP协议收取Gmail邮箱

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

阅读更多

以下为一个完整的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 onload="initialize()" onunload="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="搜索" onclick="showLocation();" />
	</div>
</body>
</html>

分享到：

简单快速实现使用线程后台执行作业的方法

2011-12-17 21:12
浏览 851
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

同态加密库应用样例源码+项目说明.zip: 同态加密库应用样例源码+项目说明.zip同态加密库应用样例源码+项目说明.zip同态加密库应用样例源码+项目说明.zip同态加密库应用样例源码+项目说明.zip同态加密库应用样例源码+项目说明.zip同态加密库应用样例源码+...

50 个Juqery 样例附源码: 50 个Juqery 样例附源码 50 个Juqery 样例附源码 50 个Juqery 样例附源码

《数据科学：R语言实现》样例源码: 《数据科学：R语言实现》样例源码

50 个jquery 样例附源码: 50 个jquery 样例附源码好东西要共享

Java语言poi导出导入样例源码: poi导出导入样例源码

Google开发者大会2018样例源码: Google I/O Android App ====================== Google I/O is a developer conference held each year with three days of deep technical content featuring technical sessions and hundreds of demonstrations...

objective c delegate 样例源码: objective c delegate 样例源码，很详细

Google Map API 开发样例源码: GoogleMap.html，简洁精要的介绍了Google Map的基本用法和学习方法，希望对...源码中实现了通过地里位置、坐标进行搜索和定位的功能，同时支持普通地图、卫星地图、地形图等，方便进行个性化拓展和开发，上手一定很快！

Android远程视频传输样例源码: Android远程视频传输样例源码,用于学习Android视频传输开发不错的哦

JavaScript学习样例源码: 本下载文件是压缩包格式主要是给学习JavaScript的样例参考学习

objective c tableview 样例源码: objective c tableview 样例源码，测试用过

小程序云开发样例源码包: 小程序云开发样例源码

集成websocket实现实时通信样例源码: 集成websocket实现实时通信样例源码

python学习百度地图的样例源码: 程序不大，是用python写的，对于百度的api的不同形式的调用有很好的作用。

GoogleMap地图源码_ios源码: GoogleMap地图源码_ios源码

大量Flash做好的样例（含源码和样例）: 大量Flash做好的样例（含源码和样例），可供初学者使用，也可在平时的项目中加入特效，使得界面美化。

微信小程序制作音乐跳动动画样例源码: 微信小程序制作音乐跳动动画样例，实际项目中应用录音上传到服务器，然后服务器解析音频后把分贝值传给小程序,小程序绘制音乐跳动动画。

易语言google地图生成工具源码.rar: 易语言google地图生成工具源码.rar

谷歌地图应用示例源码: 谷歌地图应用示例源码功能描述： 1.增加多标签 Tab 项支持 2.Javascript 脚本压缩输出 3.增加用户自定义标注支持 4.用户自定义标注点支持消息显示和回调函数自定义 CallBack 5.改进 google maps 处理流程 6.标注点...

Global site tag (gtag.js) - Google Analytics