Google Map 使用

因项目中要调用google地图，最近花了点时间阅读了下google  map 的api，google map的使用大致如下：

1、注册使用google地图api

地址为：http://code.google.com/intl/zh-CN/apis/maps/signup.html

2、阅读google 地图api

地址为：http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.html

3、测试google 地图api

（1）一个地点定位并标明位置

• 1添加JavaScript应用

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true;key=ABQIAAAAEBGBYRn2zjKnkDk35kXn-BT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSQ7sVn7B1Wp1t33kMiQlXQKL-t7g"  type="text/javascript"></script>

note:我的key是localhost，如果其他测试请重新申请

• 主要的js函数

function load(comName, comAddress, comPhone, dimensionality, longitude) {     //加载地图
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map"));
 map.addControl(new GSmallMapControl());    //放大缩小
 map.addControl(new GMapTypeControl());     //地图种类
 map.enableScrollWheelZoom();    //启用鼠标滚轮
 var point = new GLatLng(dimensionality, longitude);     // 位置
 map.setCenter(point, 14);   //地图坐标 三个参数分别为 "纬度" "经度" "比例尺"

 function createMarker(point, address, name, tel) {  //创建标记内容及标记的鼠标事件
 var marker = new GMarker(point);
 var html = '<div style="font-size:10px;">' +
 '<a >公司名称：' + name + '</a><br/>' +
 '<a >公司地址：' + address + '</a><br/>' +
 '<a >联系电话：' + tel + '</a>' +
 '</div>';
 GEvent.addListener(marker, "mouseover", function () {
 marker.openInfoWindowHtml(html);
 });
 GEvent.addListener(marker, "mouseout", function () {
 marker.closeInfoWindow();
 });
 GEvent.addListener(marker, "click", function () {
 map.setCenter(point, 16);
 //marker.openInfoWindowHtml(html);
 });
 return marker;
 }

 map.addOverlay(createMarker(point, comAddress, comName, comPhone)); //加入标记
 }
 else {
 alert("您的浏览器不支持Google地图，请升级到最新版再尝试");
 }
}

参数说明:

公司名称comName
公司地址comAddress
公司电话comPhone
公司维度 dimensionality
公司经度 longitude

• 放置地图的html位置

<div id="map" style="width: 700px; height: 300px"></div>

• js调用

• $(document).ready(function () {
   load('飞飞','温州大学','13736325515',27.924806,120.699492);
   });

2、多个地点定位并标明

• js代码

function load(dimensionality, longitude) {     //加载地图
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map"));
 map.addControl(new GSmallMapControl());    //放大缩小
 map.addControl(new GMapTypeControl());     //地图种类
 map.enableScrollWheelZoom();    //启用鼠标滚轮
 var point = new GLatLng(dimensionality, longitude);     // 位置
 map.setCenter(point, 14);   //地图坐标 三个参数分别为 "纬度" "经度" "比例尺"
 return map;
 }
}

function createMarker(map,point, address, name, tel) {  //创建标记内容及标记的鼠标事件
 var marker = new GMarker(point);
 var html = '<div style="font-size:12px;">' +
 '<a >公司名称：' + name + '</a><br/>' +
 '<a >公司地址：' + address + '</a><br/>' +
 '<a >联系电话：' + tel + '</a>' +
 '</div>';
 GEvent.addListener(marker, "mouseover", function () {
 marker.openInfoWindowHtml(html);
 });
 GEvent.addListener(marker, "mouseout", function () {
 marker.closeInfoWindow();
 });
 GEvent.addListener(marker, "click", function () {
 map.setCenter(point, 16);
 });
 return marker;
}

function Add_Marker(map,comName, comAddress, comPhone, dimensionality, longitude) {
 var point = new GLatLng(dimensionality, longitude);     // 设置标记
 map.addOverlay(createMarker(map,point, comAddress, comName, comPhone)); //加入标记
}

• c#调用

string a = @" var map = load(27.924806, 120.699492);
 Add_Marker(map,'温州大学', '茶山', '13736325515', 27.924806, 120.699492);
 Add_Marker(map,'温州大学111', '茶山22', '13736325515',27.925526, 120.700479);";
 Page.ClientScript.RegisterStartupScript(this.GetType(), "ab", a, true);

note:

在一个定位的js中，也可以采用添加多个

var point1 = new GLatLng(27.925526, 120.700479);
 map.addOverlay(createMarker(point1, 'comAddress', 'comName', 'comPhone')); 

来实现多个地点的定位和标明，但是这样可控制性太差