WPF集成Google Map

   最近在做一个销售地图的项目，用的是GoogleMap，要做成应用程序，选择了WPF来做。因为Frame控件可以直接集成网页进来，而且Google Map的各种服务和API对Javascript支持较好。

  这里把我使用到的技术列在下面：

l  Google Map Javascript API接口：

http://maps.google.com/maps/api/js?sensor=false&language=zh-CN

l  Google Map HTTP 地址解析

通过封装的C#类Google.Api.Maps.Service.dll获取，Google.Api.Maps.Service.dll这是一个将地址请求url语句分装的类，通过HttpRequest去获取请求，很好用

在做解析的时候遇到了Google 地址解析对请求频次及次数的限制，使得程序经常获取不到请求，因此这个地方我将经常用到的地址保存到数据库，在程序中先判断本地是否有，没有再去请求并入库，实现地址解析可持久化。

下载地址：http://download.csdn.net/detail/waitheart7/3461523

l  图片本地化

由于该项目的效果是一有销售记录，则在地图响应位置显示(冒出)图片，因此对图片和动画会有要求。然而图片是通过url获取的，在播放频次高的时候容易出现图片加载延时的情况。这个问题纠结了好久，做了好几个方案可惜效果不是很好，最后直接拖图片到本地才解决了。

回顾下我用的几个方案：

方案一：在JavaScript里在图片加载以前新建Image对象，并给imag.url赋值。这个方案对加载静态的页面图片效果会好些，但是由于这个项目的图片是动态加载的所以根本没有效果。

方案二：通过WebRequest请求数据流，将图片保存到本地。这个方案的缺点是需要提前去拉取图片，但是优点显著，图片加载速度很快。代码如下：

 public class LoadImag    {        /// <summary>        /// 从Url保存图片到本地        /// </summary>        /// <param name="FileName">图片的保存路径</param>        /// <param name="Url">图片的Url地址</param>        /// <returns></returns>        public bool SavePhotoFromUrl(string FileName, string Url)        {            bool value = false;            WebResponse response = null;            Stream stream = null;            try            {                WebRequest request = WebRequest.Create(Url);                response = request.GetResponse();                stream = response.GetResponseStream();                if (!response.ContentType.ToLower().StartsWith("text/"))                {                    value = SaveBinaryFile(response, FileName);                }            }            catch (Exception err)            {                string aa = err.ToString();            }            return value;        }        /// <summary>        ///         /// </summary>        /// <param name="response"></param>        /// <param name="FileName"></param>        /// <returns></returns>        private bool SaveBinaryFile(WebResponse response, string FileName)        {            bool Value = true;            byte[] buffer = new byte[1024];            try            {                if (!File.Exists(FileName))                {                    Stream outStream = System.IO.File.Create(FileName);                    Stream inStream = response.GetResponseStream();                    int l;                    do                    {                        l = inStream.Read(buffer, 0, buffer.Length);                        if (l > 0)                            outStream.Write(buffer, 0, l);                    }                    while (l > 0);                    outStream.Close();                    inStream.Close();                }            }            catch            {                Value = false;            }            return Value;        }    }

源码：点击打开链接

| JQuery show()函数展示div + Google Map OverlayView重写

GoogleMap提供了一个默认的信息提示框 infoWindow但是这个框不支持重写，并且样式不是很好看。但是GoogleMap API V3 提供了一个OverlayView的类，给开发者重写这种提示框。这个类需要重写其构造函数和3个加载函数代码如下：

/**      自定义infoWindow *      继承GoogleMap OverlayView 类*      Author:Sungan *      Date:2011.7.14*///构造函数 address是我自己定义的一个地理信息字符串 {@经度,@纬度,@地址名称,@产品编号}function MessageWindow(address) {   this.loc_now = address.split(',');    var lay_loc = new google.maps.LatLng(this.loc_now[1], this.loc_now[0]);    this.latlng_ = lay_loc; //获取标记位置    this.$div_ = null;    this.map_ = map;    this.setMap(map);}MessageWindow.prototype = new google.maps.OverlayView(); //定义MessageWindow的类型为 Google Map的自定义类型叠加层//定义这个层，并加到MessageWindow的句柄上去 tabs-template是页面上隐藏的div 其中用css自定义了风格MessageWindow.prototype.onAdd = function() {    var div = document.createElement('DIV');    div.style.position = "absolute";    var options = {};    //alert(this.index_);    $("#tabs-template .content").children()[0].src = "imag/Current/" + this.loc_now[3] + ".jpg"; //this.index_; //    $($("#tabs-template .content").children()[1]).html(this.loc_now[2] + this.loc_now[3]);    $("#tabs-template").clone().show().attr("id", '').appendTo(div);    this.$div_ = div;    //获取地图面板    var panes = this.getPanes();    //将创建的地图div添加到地图面板中    panes.overlayImage.appendChild(this.$div_);}//渲染MessageWindow 即显示 这里先将这个层隐藏掉，然后通过Jquery实现了一个出现的动画MessageWindow.prototype.draw = function() {    //定位messagewindow    var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);    if (point) {        this.$div_.style.left = point.x;        this.$div_.style.top = point.y;    }    $(this.$div_).hide();    $(this.$div_).show('slow');}//MessageWindow的移除MessageWindow.prototype.onRemove = function() {    this.$div_.parentNode.removeChild(this.$div_);} 

l  C# WPF WebControl

通过WPF组件WebControl 承载GoogleMap页面实现交互,这里使用了WPF提供的一个页面和Window的交互，通过ObjectForScripting将后台的类注册为前台可获取，以实现数据从数据库的获取。

 

该类需要额外的声明为[System.Runtime.InteropServices.ComVisibleAttribute(true)]//将该类设置为com可访问

GoogleGeograohy gg =new GoogleGeograohy();//自定义的一个类，用于获取地理数据

this.mywb.ObjectForScripting = gg;//将其声明为页面脚本

Summary：

这个项目是个简单的没有什么架构的小项目，其中的难点都不是什么技术问题，只是自己对所有的技术了解的不够深入。整理了这篇文档是为了让自己对所用到的技术做一个总结，虽然很多都是摘自网上。

全部的源码就不上传了。