C#窗体应用调用谷歌地图经验分享（菜鸟的分享）

来源：互联网发布：软件测试学linux 编辑：程序博客网时间：2024/06/05 08:21

先说下，这个东西无需太多JS基础和高深只是，只需要一点面向对象基础+一点C#基础。最近在做毕业设计，项目中需要嵌入谷歌地图，用红色标记(就是想图钉的那个)来显示监测站点的方位。对于我这种没什么项目经验，没有学过javaScript，刚学会一点点C#的菜鸟来说，根本没有头绪。在几天的学习中，最终还是完成了任务。

首先很感谢一位大神的百度地图经验分享 http://blog.csdn.net/kkkkkxiaofei/article/details/8645856，正是得益于此文章，后续的开发才能如虎添翼，才让我有想法把自己的微薄经验作为分享,第一次写博客。好的东西真的确实应该分享，不然以后百度很多东西都找不到的。。送人玫瑰，手有余香！这是今天要实现的最终效果图：

个人喜欢多举例子，这样才容易懂。话不多说，开始正题。先强调下大小写，下面所有的代码，一定注意大小写问题，切记！！！！！然后网上可能有很多教程，大部分是针对谷歌地图 API V2 而言的，需要申请密钥，然后谷歌地图现在已经不需要密钥，今天的文章的讲解都是以V3.9为例的，但愿能给你们带来帮助！

(1) 显示简单地图

看一个简单示范列子。

<!DOCTYPE html><html>  <head>    <title>Simple Map</title>    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">    <meta charset="utf-8">    <style>      html, body, #map-canvas {        height: 100%;        margin: 0px;        padding: 0px      }    </style>    <script src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"></script>    <script>var map;function initialize() {  var mapOptions = {      zoom: 15,    //放大倍数（可选参数，默认为8）      center: new google.maps.LatLng(25.81932,114.96518)        //中心点（必选参数），必须是LatLng类型，       //这里的位置是赣州火车站的经纬度  };  map = new google.maps.Map(document.getElementById('map-canvas'),      mapOptions);//实例化map对象，并加载设定的选项参数，                           //第一个参数看不懂没关系};//initializegoogle.maps.event.addDomListener(window, 'load', initialize);    </script>  </head>  <body>    <div id="map-canvas"></div>  </body></html>

把以上代码复制并保存在一个新建的html文件中，比如我在D盘根目录新建一个html文档，保存上述代码后，改名为”谷歌地图.html"。新建一个winForm项目后，在开发界面中拖入webBrowser控件，设置webBrowser控件的url属性文件路径，比如我设置URL为 D:\谷歌地图.html

运行后，可以显示地图（注：由于谷歌服务器不稳定，经常可能加载不了,稍后再次打开。还有，谷歌地图API的原例子中src是 https，要改成 http，否则加载不了，这个我纠结过好久，在这里我已经改过来了）。

对于菜鸟来说，可能不怎么能看懂代码，没事的，很多html 内容我现在也看不懂，很多都是框架的。我但是并不影响我们开发，们要做的，就是不改变框架，对里面的核心代码进行修改，实现自己的效果，我们要开发的重点也就在这里。

(2)定制参数

先看刚才代码的核心部分

var mapOptions = {      zoom: 15,          center: new google.maps.LatLng(25.81932,114.96518)  };

mapOptions是初始地图的一些参数，如果不明确制定，那就是系统默认的，选项很多，可以参考https://developers.google.com/maps/documentation/javascript/reference?hl=zh-CN#MapOptions 往下翻至 google.maps.MapOptionsobject specification栏，说明了很多参数。格式为：参数名：值，比如：zoom：8 。可能读者会问，那我们需要哪些参数？？？

首先要指定初始时地图的中心点，可以用center参数（这个参数是必须的）。center的值必须是LatLng类型，看一下例子，也是可以的

var Ganzhou = newgoogle.maps.LatLng(25.81932,114.96518)//格式是：LatLng（纬度，经度）//负的纬度表示南半球，负的经度表示西经

function initialize() {  varmapOptions = {   zoom: 15,       center: Ganzhou   };

这里注意，如果在mapOptions中要指定多个参数，每个参数末尾要用逗号（英文输入状态下），最后一个参数不需要逗号。

其次，谷歌默认的地图都是道路模式ROADMAP，如果想显示卫星地图或混合地图（两者区别是：卫星地图不能显示地名，只有卫星图），就要修改mapTypeID属性，比如

mapTypeId: google.maps.MapTypeId.HYBRID

注意google.maps.MapTypeId前缀不能少，卫星地图是SATELLITE

(3) 显示标记

标记是一个marker

看如下代码：

var marker = new google.maps.Marker({        position: map.getCenter(),//获取中心位置        map: map                });

注意代码的位置，应该放在map实例化的那段代码的后面，因为在上面的代码中，map对象这时候还没有实例化。

这样的话，我们就简单的做好了一张地图,全代码如下（仅供参考）

<!DOCTYPE html><html>  <head>    <title>Simple Map</title>    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">    <meta charset="utf-8">    <style>      html, body, #map-canvas {        height: 100%;        margin: 0px;        padding: 0px      }    </style>    <script src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"></script>    <script>var map;function initialize() {  var mapOptions = {      zoom: 15,          center: new google.maps.LatLng(25.81932,114.96518),      mapTypeId: google.maps.MapTypeId.HYBRID   };  map = new google.maps.Map(document.getElementById('map-canvas'),      mapOptions);var marker = new google.maps.Marker({        position: map.getCenter(),        map: map                });};//initializegoogle.maps.event.addDomListener(window, 'load', initialize);    </script>  </head>  <body>    <div id="map-canvas"></div>  </body></html>

如果大家有时间，可以多看看谷歌地图的API，虽然看英文慢一点，但只要你用心看，多看几次，你一定会受益匪浅的！

0 0