google地图的使用
map.setCenter(new GLatLng(45.74871966258076,126.6752815246582 ), 13);
前几天一个朋友要做一个地图旅游的功能。所以大体上看了一下google地图的使用，感觉不错，所以记下来以备后用。
要使用google地图，首先要到http://code.google.com/intl/zh-CN/apis/maps/signup.html上面申请一下使用api的key
下面简单的介绍一下使用的方法：
首先，我们要在<head></head>中间，引用google地图的js
<script src="http://ditu.google.cn/maps?file=api&v=2&key=你的key" type="text/javascript" charset="utf-8"></script>
初始化我们要加载的图片，就是我们想在地图上标出的一些特殊地址的提示图标
var baseIcon = new GIcon();
baseIcon.shadow = "/images/1.jpg";
baseIcon.iconSize = new GSize(60, 60);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
将地图加载到你要显示的div中，map_canvas是我的层
var map = new GMap2(document.getElementById("map_canvas"));
向地图中添加相应的控件，比如卫星地图，放大，缩小控件
map.addControl(new GLargeMapControl()); //缩小放大控件
map.addControl(new GScaleControl()); //a map scale
map.addControl(new GMapTypeControl()); //地图、卫星、混合地图控件
从文件取读取相应的数据，这里我只找到读取xml的方法。别的还没有试。
GDownloadUrl("TestData.aspx", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var hotelName = markers[i].getAttribute("name");
var imagePath = markers[i].getAttribute("image");
var title = markers[i].getAttribute("title");
//alert(imagePath + title);
map.addOverlay(new createMarker(point, i + 1, hotelName, imagePath, title));
}
});
初始化地图中心点
map.setCenter(new GLatLng(45.74871966258076,126.6752815246582 ), 13);
在地图中显示图标的方法
function createMarker(point, number, hotelName, imagePath, title) {
//alert(imagePath, title);
var icon = new GIcon(baseIcon);
icon.image = imagePath;
var marker = new GMarker(point, icon);
mk[number] = marker;
//当用户点击图标时显示信息
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<b>" + title + "</b><br>" + hotelName); //弹出消息
});
return marker;
}
下面我将代码放出
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewGoogleMap.aspx.cs" Inherits="GoogleMapTest.ViewGoogleMap" %>
<!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></title>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAW-4tTmYRwSdjsMwS0rSOdRRbTz3gkSkdPx87xHBLawGBMbj0TxQPZGASGe6RT8u9rkokFm3P8bpSTQ" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var mk = []; //定义操作数组
//定义页面初始化加载函数
function initialize() {
//判断浏览器是否支持google地图api,支持返回true
if (GBrowserIsCompatible()) {
//初始化地图上显示用户头相的图标，
var baseIcon = new GIcon();
// baseIcon.shadow = "/images/1.jpg";
baseIcon.iconSize = new GSize(60, 60);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
//将地图加载到层map_canvas中
var map = new GMap2(document.getElementById("map_canvas"));
//为地图添加控件
map.addControl(new GLargeMapControl()); //缩小放大控件
map.addControl(new GScaleControl()); //a map scale
map.addControl(new GMapTypeControl()); //地图、卫星、混合地图控件
//为地图初始化用户信息，从TestData.aspx中取出数据,现阶段只能取xml形式数据
//遗留问题，不知道是否可以直接取别类型的数据
GDownloadUrl("TestData.aspx", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var hotelName = markers[i].getAttribute("name");
var imagePath = markers[i].getAttribute("image");
var title = markers[i].getAttribute("title");
//alert(imagePath + title);
map.addOverlay(new createMarker(point, i + 1, hotelName, imagePath, title));
}
});
//初始化获取用户指定地址的地址解析
var search_city = new GClientGeocoder();
//地图中心点初始化
map.setCenter(new GLatLng(45.74871966258076,126.6752815246582 ), 13);
//开启鼠标控制地图缩放
map.enableScrollWheelZoom();
//根据用户登录信息给出用户现在处地的中心点，重点初始化地图中心
var city_point = search_city.getLatLng('哈尔滨南岗区',
function(response) {
map.panTo(response); //去搜到到的城市,所有为什么上面可以随便给一个坐标,当然最好是国内的
});
//在地图中显示用户的图标
function createMarker(point, number, hotelName, imagePath, title) {
//alert(imagePath, title);
var icon = new GIcon(baseIcon);
icon.image = imagePath;
var marker = new GMarker(point, icon);
mk[number] = marker;
//当用户点击图标时显示信息
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<b>" + title + "</b><br>" + hotelName); //弹出消息
});
return marker;
}
}
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div>
<div id="map_canvas" style="width: 100%; height: 600px; margin-top: 2px; margin-bottom: 5px;
border: solid 1px #ccc; background-color: #F2EFE9;">
<div style="margin: 180px 0 0 320px;">
<img src="/images/loading19.gif" width="16" height="16" align="absmiddle" />
地图加载中...</div>
</div>
</div>
</form>
</body>
</html>
TestData.aspx.cs数据资源文件
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;
namespace GoogleMapTest
{
public partial class TestData : System.Web.UI.Page
{
public Class1 db = new Class1();
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = db.gettravelInfo();
StringBuilder sb = new StringBuilder();
sb.Append("<markers>");
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
sb.Append("<marker name='" + dt.Rows[i]["UserName"].ToString() + "' hotel_id='" + (i + 1).ToString() + "' lat='" + dt.Rows[i]["pointX"].ToString().Trim() + "' lng='" + dt.Rows[i]["pointY"].ToString().Trim() + "' title='" + dt.Rows[i]["title"].ToString().Trim() + "' image='" + dt.Rows[i]["UserPic"].ToString().Trim() + "' time='" + dt.Rows[i]["Dtime"].ToString().Trim() + "' />");
}
}
sb.Append("</markers>");
Response.Write(sb.ToString());
Response.End();
return;
}
}
}