Google Map开发(一) ASP.NET中调用Google Map API实现简单的地图显示
来源:互联网 发布:@炒股软件 编辑:程序博客网 时间:2024/04/28 18:23
1、注册gooogle map api key。
输入网址http://www.google.com/apis/maps/
到google map api主页
在页面的右面点击注册一个Gooogle地图API密钥
在新的页面中进行如下设置并点击生成API密钥。其中我的网址可以是域名、IP,建议调试的时候为http://localhost申请一个Key,便于测试和修改。
点击生成API密钥后进入到如下页面,注意记录下自己申请的Key和示例代码。
下面即为我们注册的Key 查看地址:http://code.google.com/intl/zh-CN/apis/maps/signup.html
Thank You for Signing Up for a Google Maps API Key!
Your key is:
ABQIAAAArE134c2Mr3M29FkARzPFlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR48vLPcCXKDxOOw0-JDlZzbOdQxA
Note: for more information on the API key system, consult http://code.google.com/apis/maps/faq.html#keysystem.
How you use your key depends on what Maps API product or service you use. Your key is valid for use within the entire family of Google Maps API solutions. The following examples show how to use your key within the Maps API product family.
JavaScript Maps API Example
Within the JavaScript Maps API, place the key within the script tag when you load the API:
...
// Note: you will need to replace the sensor parameter below with either an explicit true or false value.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAArE134c2Mr3M29FkARzPFlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR48vLPcCXKDxOOw0-JDlZzbOdQxA" type="text/javascript"></script>
...
See Loading the Maps API in the JavaScript Maps API documentation for more information.
Maps API for Flash Example
Within the Maps API for Flash, you may place the key within an MXML declaration, declare it directly within code as a Map.key
property, or as a flashVars
property within the HTML container. A sample MXML declaration is shown below.
...
<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%"
key="ABQIAAAArE134c2Mr3M29FkARzPFlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR48vLPcCXKDxOOw0-JDlZzbOdQxA"/>
...
See Declaring Maps in the Maps API for Flash documentation for more information.
HTTP Service Example
Within a Maps API HTTP Service, such as the Static Maps API or Geocoding Service, place the key directly in the request URL:
http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=json&oe=utf8/
&sensor=true_or_false&key=ABQIAAAArE134c2Mr3M29FkARzPFlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR48vLPcCXKDxOOw0-JDlZzbOdQxA
Note that for all examples, you must replace the sensor
parameter with a valid value, based on whether your application uses a sensor to determine a user's location. Check out the API documentation for more information.
到此,注册Google Map API key就完成了。
需要查看帮助,回到主页面点击地图API参考即可查看Google Map开发帮助。
地址:http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html#GMapOptions
2、新建网站
打开VS2005,点击File->New->Web site。
在弹出的对话框中选择ASP.NET Web Site项,同时按照个人需求选择相应的语言,此处选择了Visual C#语言。路径一栏可以保持默认,也可以选择一个路径(如:D:/GoogleMap),当选择一个路径后要在路径后面加上一个文件夹的名字,当创建网站时,网站的一些文件将保存到该文件夹下(此处创建的文件夹ShowMap)。
点击ok,出现如下页面。
点击运行按钮(或按F5),系统出现如下提示,点击Ok。
如果系统没有错误,将弹出一个空白网页。
3、调用Google Map API服务,显示地图。
先双击Default.aspx,看看最原始的代码。
原始代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
将JavaScript Maps API Example中的代码(注意:代码中的google map api key 正是我们先前申请的key),拷贝到title标签下head标签以内,代码如下:
<head runat="server">
<title>Untitled Page</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAArE134c2Mr3M29FkARzPFlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR48vLPcCXKDxOOw0-JDlZzbOdQxA" type="text/javascript">
</script>
</head>
修改原始代码中div容器属性,代码如下:
<div id="map" style="width:800px;height:600px">
</div>
将如下代码添加到</html>的后面(当然也可以嵌入到html内部)。
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) //首先得判断浏览器是否支持Google maps的执行
{
var map = new GMap2(document.getElementById("map"));//将地图显示在以map为ID号的DIV容器中
map.setCenter(new GLatLng(40.000,116.5029), 10); //设置中心经纬度(此处为北京的经纬度)和地图放大级数
map.addControl(new GMapTypeControl()); //添加地图类型切换控件(如卫星图到二维地图的切换控件)
map.addControl(new GLargeMapControl()); //添加有滑块的地图导航控件
map.addControl(new GOverviewMapControl()); //添加鹰眼控件
map.enableGoogleBar(); //显示google搜索框
}
}
</script>
如果对代码中的这些函数不理解可以到如下网站查看帮助信息。
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html
修改原始代码中body的属性,代码如下:
<body onload="load" onunload="GUnload()"><%--GUnload()表示释放地图的空间--%>
修改后的全部代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAArE134c2Mr3M29FkARzPFlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR48vLPcCXKDxOOw0-JDlZzbOdQxA" type="text/javascript">
</script>
</head>
<body onload="load()" onunload="GUnload()">
<form id="form1" runat="server">
<div id="map" style="width:800px;height:600px; ">
</div>
</form>
</body>
</html>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) //首先得判断浏览器是否支持Google maps的执行
{
var map = new GMap2(document.getElementById("map"));//将地图显示在以map为ID号的DIV容器中
map.setCenter(new GLatLng(40.000,116.5029), 10); //设置中心经纬度(此处为北京的经纬度)和地图放大级数
map.addControl(new GMapTypeControl()); //添加地图类型切换控件(如卫星图到二维地图的切换控件)
map.addControl(new GLargeMapControl()); //添加有滑块的地图导航控件
map.addControl(new GOverviewMapControl()); //添加鹰眼控件
map.enableGoogleBar(); //显示google搜索框 }
}
</script>
按运行按钮或F5系统运行结果如下:
- Google Map开发(一) ASP.NET中调用Google Map API实现简单的地图显示
- android Google Map API V2(显示地图)
- android Google Map API V2(显示地图)
- 调用google map api
- Google map离线API实现离线地图
- google map api javascript xml 生成一个简单的地图
- Google Map API Version3 教程(一):显示一个最基本的地图
- Google map (1) 显示一个简单的地图
- 简单的学习了一下Google Map API,实现IP在地图上的定位
- ASP.NET Google Maps Javascript API V3 实战基础篇一简单显示地图
- 基于ASP.NET技术将数据库中坐标点数据呈现到GOOGLE地图上 (google map开发高级篇)
- Google地图(Map)API在J2ME中使用方法
- 谷歌地图(google map)API
- Google Map开发系列(七)——使用谷歌地图API实现自定义控件
- Google Map开发系列(十三)——使用地图API实现自定义叠加层
- Google Map开发系列(七)——使用谷歌地图API实现自定义控件
- Google Map开发系列(七)——使用谷歌地图API实现自定义控件
- Google Map开发系列(十三)——使用地图API实现自定义叠加层
- 个人魅力培养
- 我
- linux目录操作和常用命令
- 12
- 软件08级基础强化训练选题通知
- Google Map开发(一) ASP.NET中调用Google Map API实现简单的地图显示
- 悲剧的JAVA环境变量
- 开博了!!!
- uuid && 随机数 && md5
- 索引顶点缓冲
- 配置错误:未能使用提供程序“RsaProtectedConfigurationProvider”进行解密。提供程序返回错误信息为: 打不开 RSA 密钥容器。
- JOJ1011: If only I had a Venn diagram
- 【招行助我走大运】推荐信
- 月影村汉化版还有多远?