`
yuruei2000
  • 浏览: 34036 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

google map v3 实现拖动得到坐标和坐标详细地址

阅读更多

最近的项目有要用google map v3 所以,看来多次文档和demo 实现了一些东西,话不多说,上代码,后面附文件

 

 

 

 

<script type="text/javascript">
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('无法确定地址在这个位置。');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
  var latLng = new google.maps.LatLng(31.1933370274183, 121.43890661621094);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 11,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Point A',
	icon:"pred.gif",
    map: map,
    draggable: true
  });
  google.maps.event.addListener(marker, "mouseover", function() {

				marker.setImage('pred.gif');

				}); 
  google.maps.event.addListener(marker, "mouseout", function() {

				marker.setImage('pgreen.gif');
				
				}); 
  // 更新当前的位置信息
  updateMarkerPosition(latLng);
  geocodePosition(latLng);
  
  // 添加拖动事件监听器
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('正在搜索...');
  });
  
  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('正在搜索...');
    updateMarkerPosition(marker.getPosition());
  });
  
  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('搜索结束');
    geocodePosition(marker.getPosition());
  });
}

// 加载载应用程序。
google.maps.event.addDomListener(window, 'load', initialize);
</script>

 

0
0
分享到:
评论
2 楼 jiabin_007 2015-06-12  
写的非常好,但是。。文件呢?
1 楼 hzfeibao 2012-05-11  
关注一下,我最近也要用到谷歌地图

相关推荐

    google map api v3源码

    10. **地理围栏与区域检测**: 通过监听地图的拖动和缩放事件,可以实现地理围栏功能,当用户进入或离开特定区域时触发特定行为。 由于这个压缩包名为"WebMap",里面可能包含了一个简单的web应用,展示如何使用谷歌...

    googleMap V3 中文API

    在“Google_Maps_JavaScript_API_V3中文手册.pdf”中,你可以找到关于如何使用谷歌地图API V3的详细指南。以下是一些关键知识点的概述: 1. **初始化地图**: - `google.maps.Map`对象是地图的核心,你需要创建一...

    wpf google map v3 示例

    综上所述,"wpf google map v3 示例"是一个展示如何在WPF中集成Google Maps API V3并实现动态添加标记的示例。它涵盖了WPF WebBrowser控件的使用、JavaScript与C#的交互、Google Maps API的API调用等多个技术点,...

    Google Map v3 官方实例

    在IT行业中,Google Maps API v3 是一个广泛使用的工具,用于在网页上集成地图功能。...通过学习和实践这些实例,开发者可以更好地理解和掌握Google Maps API v3的用法,从而实现各种复杂而富有创意的地图功能。

    google map jsv3 示例

    7. **地理编码(Geocoding)**:通过`google.maps.Geocoder`类,可以将地址转换为经纬度坐标,或者反过来,将坐标转换为地址,这在定位和导航应用中非常实用。 8. **地图服务(Map Services)**:jsv3提供了一系列...

    Google Map api V3 (3.9.12)的离线开发包

    Google Map API V3(3.9.12)是谷歌提供的一个用于在网页上嵌入交互式地图的服务,它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试,这...

    google map api v3 ExtDraggableObject

    谷歌地图API V3是Google为开发者提供的一种强大的工具,用于在网页上集成和操作地图。在API中,`ExtDraggableObject`是一个自定义扩展类,它允许用户将地图上的对象(如标记、覆盖物等)进行拖放操作,极大地增强了...

    googlemap js v3 gmap

    在“chapter10”中,可能会介绍如何利用Google Maps API V3实现地理编码,即将地址转化为经纬度坐标,以及反向地理编码,即从坐标点获取地址信息。这一章还可能涉及如何在地图上添加自定义标记(markers)和信息窗口...

    google api v3 实例

    2. **地理编码服务**:Google Maps V3提供了地理编码API,可以将人类可读的地址转换为经纬度坐标。这对于根据地址定位地图上的特定位置非常有用。 3. **标记(Marker)与信息窗口(InfoWindow)**:标记可以用来...

    Google Map Api

    在官方文档`google map api v3.chm`中,包含了详细的API参考、示例代码和教程,帮助开发者快速上手。`index.lnk`可能是指向文档的快捷方式,而`code.google.com`则是旧版本的API链接,虽然现在已被迁移到`developers...

    Google_Maps_API_V3.rar_Google Maps api v3_谷歌地图

    学习和掌握Google Maps API V3,需要对JavaScript有一定的了解,同时,理解地理坐标系统和网络请求机制也是必要的。在实际项目中,还需要考虑API调用限制和性能优化,以及如何结合后端数据来实现更复杂的功能。总的...

    Google Maps API V3 中文参考文档(JavaScript)

    Geocoder 是 Google Maps API V3 中的一种组件,用于将地址转换为经纬度坐标。开发者可以使用 GeocoderRequest 对象来配置地理编码请求的基本属性,如地址、语言、区域等。 DirectionsRenderer DirectionsRenderer...

    Google_map_JavaScript_API_V3

    API提供了`google.maps.Geocoder`服务,可以将地址转换为坐标,或者反之。这对于实现“查找我的位置”或基于地址的搜索功能至关重要。 7. **事件监听器(Event Listeners)** 你可以监听地图上的各种事件,如点击...

    Google Maps JavaScript API V3 详细教程

    《Google Maps JavaScript API V3 详细教程》 Google Maps JavaScript API V3 是一款强大的工具,允许开发者在网页中集成互动式地图,为用户提供丰富的地理位置体验。API 的第三版相较于第二版进行了更新和优化,...

    Google_Maps_API_V3.docx

    谷歌地图API V3是谷歌地图服务的一个重要更新,它提供了许多增强的功能和改进,使得开发者能够更方便地在网页上集成交互式地图。这个版本主要针对JavaScript应用,旨在提高性能,简化开发流程,并且增加了对多种平台...

    [免费]Google Maps JavaScript API V3中文版参考手册.rar

    通过设置`&lt;div&gt;`元素,并指定其ID,然后在JavaScript中调用`google.maps.Map`构造函数,传入容器ID和地图选项,如中心点坐标、缩放级别等,即可创建地图实例。 ```javascript var mapDiv = document.getElementById...

    Google Maps API V3学习(例子不断增加中)

    Google Maps API V3是Google提供的一项强大服务,允许开发者在自己的网页上嵌入交互式地图,实现丰富的地理位置应用功能。这个API版本着重优化了性能,降低了对网页资源的消耗,同时提供了更灵活的接口和更丰富的...

    baidumapapi_v3_5_0

    4. **地理编码与反地理编码**:将地址转化为经纬度坐标(地理编码),或者将坐标转化为地址(反地理编码)。 5. **覆盖物**:开发者可以添加各种覆盖物到地图上,如标注、图标、自定义形状等,以展示信息或者美化...

    Google_Maps_API_V3_HTML

    文件 "Google Maps Javascript API V3 Reference - Google Maps JavaScript API v3 — Google Developers.htm" 应该是官方的 API 参考文档,包含了所有可用的类、方法、属性和事件的详细信息。开发者应仔细阅读这份...

    GMap V3 各种机能汇总

    8. **地理编码(Geocoding)**:GMap V3提供了地址到坐标(反向地理编码)和坐标到地址(地理编码)的功能,便于地图与地址之间的转换。 9. **地图事件**:GMap V3支持各种地图事件,如拖动、缩放、鼠标悬停等,...

Global site tag (gtag.js) - Google Analytics