在winform中嵌入谷歌地图,并实现定位和根据给出的两个点连接路径的功能。
这是楼主研究生的第一个小项目,历经两天终于实现,期间遇到很多问题,在搜索资料的时候发现有很多朋友也碰到类似的问题,所以在这里给大家分享下经验。
先看下结果图:
接下来先看下html代码:
以下代码都可参考goole map 的api:https://developers.google.com/maps/documentation/javascript/reference。 多看看api绝对有好处!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(36.06667,120.33333),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(36.06667,120.33333),
map: map
});
}
function addLine(){
var myLat = window.external.getLat_1();
var myLng = window.external.getLng_1();
var myPoint_1 = new google.maps.LatLng(myLat,myLng);
var myLat = window.external.getLat_2();
var myLng = window.external.getLng_2();
var myPoint_2 = new google.maps.LatLng(myLat,myLng);
var mapOptions = {
zoom: 15,
center: myPoint_1,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var flightPlanCoordinates = [
myPoint_1,
myPoint_2
];
var marker = new google.maps.Marker({
position: myPoint_1,
map: map
});
var marker = new google.maps.Marker({
position: myPoint_2,
map: map
});
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
主要分两部分,addLine()之上是一部分,之下是一部分,下面我们分别解析。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(36.06667,120.33333),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(36.06667,120.33333),
map: map
});
}
这一段如函数名即初始化地图,并在给定位置添加标注。
mapOptions中,zoom表示放大倍数(可更改),center表示初始地图中心位置,maptypeid 现在不用管这个参数。
接下来就是实例化map,传入mapOptions中的参数。 marker即在给定位置添加标注。
直接复制此段代码和最后一句
google.maps.event.addDomListener(window, 'load', initialize);
放到html文件里,用浏览器打开就可以加载地图了。
下面addLine 方法中核心就是
<pre name="code" class="html"> var myLat = window.external.getLat_1();
var myLng = window.external.getLng_1();
var myPoint_1 = new google.maps.LatLng(myLat,myLng);
var myLat = window.external.getLat_2();
var myLng = window.external.getLng_2();
var myPoint_2 = new google.maps.LatLng(myLat,myLng);
通过wendow.external方法从前台winform中获得输入的坐标。具体可看下篇,详细讲述wenform和js的双向互动。
其余代码看变量名就很容易懂了,或者去看下API,我就不再赘述了。