因项目中要调用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&v=2&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'));
来实现多个地点的定位和标明，但是这样可控制性太差
