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)。
分享到:
相关推荐
googleMap根据经纬度获取地理位置,里面有使用代码,只需填入经纬度即可获取地理位置信息
根据经纬度转换成详细地址。由于google map v2 已申请不了key 了, 更换成v3, 代码也需要更换成v3代码。2013-10-30上传。
实现通过GPS或NetWork获取当前位置的经纬度,并且在Google Map Android v2上显示
C#.NET实现的GoogleMap地址及经纬度查询 仅供参考!
googlemap根据经纬度取地名。是一个用googlemap根据经纬度 来得到地名的小页面程序。
一个google map小应用 应用google map api可以获得点的经纬度并且可以根据地理位置名称定位。
Googlemap 根据地名查询经纬度,Googlemap 根据地名查询经纬度
谷歌MAP_V3中文详解以及一个简单例子
使用google地图的反向地址解析功能,提供一个经纬度得到对应地址,或者给出模糊地址,得到经纬度,放在java后台代码中处理,这个使用的是Google的地理编码服务。一般而言数据量不大的情况使用是不限制的。按照Google...
Android使用Google Map API创建的一个根据经纬度定位的程序. 交流QQ群:1279871
通过模拟手机获取基站的Cell ID来获取匹配当前点的经度和纬度
google map v3开发 V3地图搜素,V3地图标注,V3地图多点标注
googleMap的中文API,V3版本的,希望对于还在使用googleMap离线地图的你有所帮助
GoogleMap中文教程,包含V3版本中文API,不过是通过翻译出来的,不过作为平时上不了网的脱机资源还是可以看看的。
matlab绘制地图,自动转化为经纬度坐标,有全球的地图,自动识别
Google Map V3 开放手册 开放文档 里面包含了 Map类 方法 属性 是咧
Google Map API V3 离线开发文档(与Google官网一模一样,经编辑后离线也能照样查看,速度提升一个等级) PS:文件不能重命名,而原因想必你懂的!
google map v3离线地图资源包,原博文链接源码
Google Map v3 官方实例 .手工整理的.
获取51map的经纬度获取51map的经纬度