Google Map 使用

联系:手机/微信(+86 17813235971) QQ(107644445)

标题: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')); 

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

发表评论

邮箱地址不会被公开。 必填项已用*标注

13 + 7 =