您的位置：首页 > 编程语言 > ASP

Google Map开发（一） ASP.NET中调用Google Map API实现简单的地图显示

2010-07-02 21:54 1116 查看
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系统运行结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航