GoogleMapV3具体使用

来源：互联网发布：银魂中空知大猩猩编辑：程序博客网时间：2024/05/02 12:51

最近做一个小项目，网页中嵌入google maps，输入经纬度坐标可以定位地图位置并加注标记，点击标记获取远端摄像头数据并在视频窗口实现播放。在实际操作过程中，由于经纬度数据和视频登录的用户名密码数据均要从后台数据库中提取，，而第三版的google maps api又是在javascript中实现的，因此不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现，故问题演化成asp.net中jiavascript与后台c#如何进行交互。

C#代码与javaScript函数的相互调用主要有四个方面：

1.如何在JavaScript访问C#函数?

2.如何在JavaScript访问C#变量?

3.如何在C#中访问JavaScript的已有变量?

4.如何在C#中访问JavaScript函数?

一、javaScript函数中执行C#代码中的函数：

方法一：页面和页面类结合

1、函数声明为public

后台代码(把public改成protected也可以)

public string ss()

{

return("a");

}

2、在html里用<%=ss()%>可以调用//是C#中后台的函数名称

前台脚本

var a = "<%=ss()%>";//JavaScript中调用C#后台的函数

alert(a);

</script>

方法二： JavaScript异步调用定义在ASP.Net页面中的方法

1.将该方法声明为公有(public);

2.将该方法声明为类方法(C#中的static,VB.NET中的Shared),而不是实例方法;

3.将该方法添加【WebMethod】属性

4.将页面中ScriptManager控件的EnablePageMethods属性设置为true;

5.在客户端使用如下JavaScript语法调用该页面方法

PageMethods.[MethodName](param1,param2,...,callbackFunction);

6.为客户端异步调用指定回调函数,在回调函数中接受返回值并进一步处理;

7.添加 using System.Web.Services;

示例：

前台JavaScript代码

function JsCallCSharp(param1)

{

PageMethods.sayhell(param1,onSayHelloSucceeded);//sayhell是后台标注了【webMethod】属性的方法 param1是传入该方法的参数，onSayHelloSucceeded是回调函数主要是对后台返回的结果进一步处理

}

function onSayHelloSucceeded(result)//绑定的回调函数

{

alert(result);

}

</script>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">//ScriptManager控件管理脚本的，

注意设置EnablePageMethods="true"此属性

</asp:ScriptManager>

<div>

</div>

</form>

</body>

</html>

后台代码（.cs文件）

using System;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Web.Services;//添加web服务引用

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]//标示为web服务方法属性

public static string sayhell(string say)//注意函数的修饰符,只能是静态的

{

return say;

}

方法三： JavaScript异步调用定义在Web服务类中的方法

1.添加一个web服务标示该服务为允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务

对应属性为[System.Web.Script.Services.ScriptService]

2.将该方法声明public并将该方法标示为[webMethod]属性方法

3.在页面中ScriptManager控件并添加web服务引用 <Services><asp:ServiceReference Path="~/WebService.asmx" /></Services>

4.在客户端使用如下JavaScript语法调用web服务方法

WebService.HelloWorld("helloWord",function(res)//Webservice是web服务页面名称 HelloWord为web服务页面类中的方法，function为回调JavaScript函数主要是处理返回的结果

{

alert(res);

});

示例：

页面代码

function JsCallCSharp(param1)

{

PageMethods.sayhell(param1,onSayHelloSucceeded);

}

function onSayHelloSucceeded(result)

{

alert(result);

}

//该方法为调用的函数

function JsCallWebService()

{

WebService.HelloWorld("helloWord",function(res)//调用web服务

{

alert(res);

});

}

</script>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >

<Services><asp:ServiceReference Path="~/WebService.asmx" /></Services>//注意要引用web服务

</asp:ScriptManager>

<div>

</div>

</form>

</body>

</html>

web服务后台代码

using System;

using System.Collections;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Xml.Linq;

/// <summary>

///WebService 的摘要说明

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。

[System.Web.Script.Services.ScriptService]//注意要添加该标示

public class WebService : System.Web.Services.WebService {

public WebService () {

//如果使用设计的组件，请取消注释以下行

//InitializeComponent();

}

[WebMethod]//方法要标示的属性

public string HelloWorld(string result) {

return result;

}

二、JavaScript访问C#变量

　　方法一：

　　a、通过页面上隐藏域访问,可以在后台把c#变量值保存到隐藏文本域当中。

　　b、然后在前台javascript当中直接取隐藏文本域的值。

　　 document.getElementByIdx_x('xx').value

　　方法二：

　　a、在服务器端变量赋值后在页面注册脚本

　　Page.RegisterStartScript(" ","<script language='javascript'>var vary=" + value + "</script>");

　　value是后台变量，然后javascript中可以直接访问vary值,它的值就是后台变量value的值，这种方式只不过是能过一种间接的方式来访问c#变量。

三、C#中访问JavaScript的已有变量

方法一：1、前台使用服务器文本控件隐藏域，将js变量值写入其中；后台直接通过控件id访问和调用，即后台用Request["id"]来获取值。

方法二：可以用cookie或session存储变量值，后台直接使用

使用session以下是代码片段：

.cs

if (Session["siteName"] == null)//判断是否存在指定Key值的Session变量

Session["siteName"] = "";//如果不存在则创建Session变量

//给Session["siteName"]变量赋值

.aspx

var siteName="<%=Session["siteName"] %>";

四、C#代码执行JavaScript函数和调用JavaScript函数

方法一：C#中使用ScriptManager.RegisterStartupScript(this, this.GetType(), "edit", "CSharpCallJs('"+param1+"','"+param2+"')",

示例：

脚本函数

function CSharpCallJs(param1,param2)

{

alert(param1 + param2);

}

页面后台代码

ScriptManager.RegisterStartupScript(this, this.GetType(), "edit", "CSharpCallJs('" + param1 + "','" + param2 + "');", true);//关键代码调用页面脚本函数的代码

方法二：使用隐藏域或者Literal控件，在前台使用js脚本把一些js函数控制的值写进隐藏域或者Literal控件，然后前台使用Hidden.Value或者Literal.Text读取前台值。

以下是代码片段：

.aspx

　　function GetTitleID(obj)

　　{

　　sTitleID=obj

　　if(sTitleID!=null)

　　document.getElementByIdx_x("HiddenField1").value=type+','+sTitleID;

　　else

　　document.getElementByIdx_x("HiddenField1").value=type+',0';

　　}

　　.cs

　　string hiddenValue = this.HiddenField1.Value;

方法三：Page.RegisterStartupScript("function","<script>你要调用的javascript函数名称;</script>");

出自：http://www.cnblogs.com/poleices/archive/2011/02/24/1963727.html

在上一篇《asp.net中javascript与后台c#交互》中实现了前端脚本javascript调用后台的数据库的数据。但新的问题又出现了，由于地图上有多个点，所以存放google maps的longitude和latitude有多个值，这就需要利用数组来存放经纬度，问题又演变成如何把后台的c#数组传给前端的js。由于刚接触asp.net和前端这块，基本是零基础，所以这个问题困扰了很久，上网查资料，后来在一篇文章中看到解决办法，但文章中的方法处理的是定长数组，而我现在要处理的是不定长数组，由于用户有可能会添加和删除地图上的位置，所以从数据库里查询的记录数是未知的，所以我又在文章的基础上修改了一下。自己亲自的实践了一下并应用在自己的程序中，果然解决了问题。现在结合大牛的文章和我自己的亲身实践来说明一下这个问题是如何解决的。

第一步：定义cs数组

cs文件里后台程序中要有数组，这个数组要定义成公共的数组。

public string[] lat = null;

public string[] lng = null;

第二步：给cs数组赋值

cs数组的值一般都是从数据库中取到的，相信大家也都会，且后边的代码中也会有描写，这里就不做详细的解释。

第三步：将cs数组赋给前端的js数组

这个步骤是关键，我选用的方法就是<%=cs数组%>。这样模糊的说法也是百度得到的，赋值会用到循环，即会一个元素一个元素的赋值。

后台cs代码

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data.OleDb;

using System.Data;

using System.Collections;

public partial class VideoSource : System.Web.UI.Page

{

public string[] lat = null;//存放纬度值

public string[] lng = null;//存放经度值

public int lng_len = 0;//用于获得数组长度

public int k = 0;//用于赋值循环

protected void Page_Load(object sender, EventArgs e)

{

ArrayList lng_list = new ArrayList();

ArrayList lat_list = new ArrayList();

OleDbConnection con = new OleDbConnection(@"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + Server.MapPath("App_Data/Database1.accdb"));

con.Open();

string sql = "select * from tb_videos";

try

{

OleDbDataAdapter gh = new OleDbDataAdapter(sql, con);

DataSet ds = new DataSet();

gh.Fill(ds);

con.Close();

foreach (DataRow DR in ds.Tables[0].Rows)

{

lng_list.Add(DR[2].ToString());

lat_list.Add(DR[3].ToString());

}

catch

{

con.Dispose();

}

lng = (string[])lng_list.ToArray(typeof(string));

lat = (string[])lat_list.ToArray(typeof(string));

lng_len = lng_list.Count;

}

aspx代码

var jingdu = new Array();

var weidu = new Array();

for(int k=0;k<lng_len;k++){

jingdu.push("<%=lng[k]%>");

weidu.push("<%=lat[k]%>");

}

var latlng=[];

for(var i=0;i<jingdu.length;i++){

latlng.push(new google.maps.LatLng(jingdu[i],weidu[i]));

}

</script>

上述代码即为我解决问题所用代码，均已试验通过。

参考：http://blog.csdn.net/heyt860921/article/details/5871088#comments

这周任务完成一个地图和视频资源结合的demo，今天周日又加上“万恶”的光棍节，回顾总结一下所用的google map知识，写在这里就当作备忘吧。

本文主要总结Google map API V3使用中最简单也是最常见的一些操作以及相关概念，如果需要更加详细的信息，请直接阅读Google提供的关于map的文档。

google map api v3文档链接：

英文版：https://developers.google.com/maps/documentation/javascript/reference

中文版：https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-CN

1、在页面中加入Google Map服务

src="https://maps.google.com/maps/api/js?sensor=false">

其中sensor参数用于指明此应用程序是否使用传感器确定用户的位置，取值为true或false。

2、加载Google Map API

function initialize() {

var myLatlng = new google.maps.LatLng(39.9629, 116.3581);

var myOptions = {

zoom: 16,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map(document.getElementByIdx_x("map_canvas"), myOptions);

}

google.maps.event.addDomListener(window, "load", initialize);

最后一句话是打开浏览器加载地图。

3、向地图中添加marker

function initialize() {

var myLatlng = new google.maps.LatLng(39.9629, 116.3581);

var myOptions = {

zoom: 16,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map(document.getElementByIdx_x("map_canvas"), myOptions);

var image='Image/webcam.png';

var marker1 = new google.maps.Marker({

position: lamyLatlngtlng[j],

map: map,

icon:image,

title:"hello,world!"

})

}

每个标记都是一个google.maps.Marker对象，在实例化时需要给定一定的配置信息，如标记的位置。

通过icon可以设定自己想显示的图标，不设置则显示Google map默认的图标。title表示鼠标放到marker

上要显示的值。

4、向地图中添加信息窗口infowindow

function initialize() {

var myLatlng = new google.maps.LatLng(39.9629, 116.3581);

var myOptions = {

zoom: 16,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map(document.getElementByIdx_x("map_canvas"), myOptions);

var image='Image/webcam.png';

var marker1 = new google.maps.Marker({

position: lamyLatlngtlng[j],

map: map,

icon:image,

title:"hello,world!"

})

var contentString = 'Hello World';

var infowindow = new google.maps.InfoWindow({

content: contentString

});

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map,marker);

});

}

每个信息窗口都是一个google.maps.InfoWindow对象，在实例化时需要给定一定的配置信息，如窗口中的内容，标记的位置。

其中需要说明的是，配置信息中的content即可以是html字符串，也可以是一个dom节点。要让一个信息窗口显示出来，我们可以调用它的open方法，并制定显示在那个Map实例对象中。注意，如果在信息窗口构造时的配置中已经制定了位置（通过position字段），那么直接使用infoWindow.open( map )，就可以显示在地图的制定位置上。当然，我们也可以将信息窗口的显示绑定在已经在地图中的标记对象中，只需在open的第二个参数中制定标记对象即可infoWindow.open( map, marker )。

5、事件绑定

使用google.maps.event.addListener()方法来进行事件的监听。该方法接受三个参数：一个对象，一个待侦听事件以及一个在指定事件发生时调用的函数。

(1)监听地图的缩放：

google.maps.event.addListener(map, 'zoom_changed', function() {

});

(2)标记的点击：

google.maps.event.addListener( marker, 'click', function( event) {

// 点击事件后要实现的函数；

});

(3)监听dom事件:

google.maps.event.addDomListener(window, 'load', initialize);

以上的基本功能都是我用到过的，当然Google map API V3的功能远远不止这些，如果还有更高的要求，请直接访问google的官方文档。