使用google map v3添加经纬度信息

最新推荐文章于 2024-07-11 15:40:56 发布

ztguang

最新推荐文章于 2024-07-11 15:40:56 发布

阅读量677

点赞数

分类专栏：系统运维

本文链接：https://blog.youkuaiyun.com/ztguang/article/details/51012135

版权

系统运维专栏收录该内容

51 篇文章

订阅专栏

http://s8186255.iteye.com/blog/758678

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

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

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

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

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

html准备；

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

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

//放置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>