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.youkuaiyun.com/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：

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

全部的源码就不上传了。