html拖动生成位置坐标,google 地图 v3 实现拖动得到坐标和坐标详细地址

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

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

如果你有什么不懂得或者讨论的请加群：150508281

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);

1 楼

hzfeibao

2012-05-11

关注一下，我最近也要用到谷歌地图