使用google map v3添加经纬度信息_Ruby_编程开发_程序员俱乐部

???? V3版的Google map，从提供的代码结构而言，更加模块化，链式操作的感觉也不错，关键代表了未来，所以掌握其使用方法自然 重要。

??? 与地图相关的应用开发中，常用的技术是将经纬度录入到后台库中，显示的时候，读出经纬度，通过google提供的js，将你关注的点在地图上画出来。或者可以画出更多的东西，比如线、多边形。

??? 以往基于专业地图系统如mapinfo、esri、中地地图系统等开发应用软件，面临的最大问题是地图信息的更新，基于google map这个云计算平台，一切担忧可以消解。

??? 废话少说，现在举一个简单的例子：当我们点击地图的时候，可以获取经纬度信息，并录入到后台系统中。比如我们将一个照片放在地图的某个点，就需要如此的应用。

js准备，准备好jquery和google的js；

<script type="text/javascript" charset="utf-8" src="/javascripts/jquery1.4.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

html准备；

<form action='/geo/create'>

??????? <div id="map" style="width: 560px;height: 400px;"></div>
??????? <input id="geo-lat" type="hidden"name="latitude" value=""/>
??????? <input id="geo-lng" type="hidden"name="longitude" value=""/>

.....

</form

前面的div是地图的显示位置大小；

客户化的js代码准备：主要解决页面载入干什么、点击地图干什么的问题；

<script type="text/javascript">

? //below is map
? var map;
? var markersArray = [];
? var arrInfoWindows = [];
? //定义初始化地图，同时定义一些函数，供页面载入之后的事件进行调用。
? function mapInit(){
??? var centerCoord = new google.maps.LatLng(43.83, 87.60);
??? var mapOptions = {
????? zoom: 13,
????? center: centerCoord,
????? mapTypeId: google.maps.MapTypeId.ROADMAP
??? };
??? //map = new google.maps.Map(document.getElementById("map"), mapOptions);
??? map = new google.maps.Map(document.getElementById("map"), mapOptions);
? };

//放置marker
? function placeMarker(location) {
??? var clickedLocation = new google.maps.LatLng(location);
??? var marker = new google.maps.Marker({
????? position: location,
????? map: map
??? });
??? markersArray.push(marker);

//这里根据用户操作，将经纬度取出来，并复制到input中。
??? $("#geo-lat").val(marker.getPosition().lat());
??? $("#geo-lng").val(marker.getPosition().lng());

? };

//清除marker，这个函数需要使用，不然你的鼠标点击之处，都有标记，而你只需要一个。
?? function clearMarkersBefore() {
??? if (markersArray) {
????? for (i in markersArray) {
??????? markersArray[i].setMap(null);
????? }
????? markersArray.length = 0;
??? }
? };


//这以下是载入页面要做的事情：初始化，同时在地图上增加一个事件；
? $(function(){
??? //初始化地图
??? mapInit();
??? google.maps.event.addListener(map, 'click', function(event) {
????? clearMarkersBefore();
????? placeMarker(event.latLng);
??? });
? });
</script>

后面两个是经纬度；

后台准备；

这里可以使用任何后台程序，获取两个hidden input的值，进行后期处理即可。

提示：

1、在实现的过程中，与v2不同的是对点击地图形成多个marker的处理，最终发现这种采用数组的处理方式最好。

2、我的后台是rails，我还是坚持我的观点，rails开发应用在开发的时候，界面方面要减少个性化的东西，比如rjs、比如支持google map ym4r等插件，直接使用javascript（jquery）。