google map地址解析

本文介绍如何使用Google Maps JavaScript API v3进行简单的地理编码操作。通过输入地址信息,可以获取并显示该地址对应的地理位置,并在地图上标记出来。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html;"/> 
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var geocoder; 
  var map; 
  function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(31.23, 121.47); 
    var myOptions = { 
      zoom: 12, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  } 
 
  function codeAddress() { 
    var address = document.getElementById("address").value; 
    geocoder.geocode( { 'address': address}, function(results, status) { 
   
      if (status == google.maps.GeocoderStatus.OK) {
     
        console.log(results[0].geometry.location); 
        //alert(results[0].geometry.location.jb);
        map.setCenter(results[0].geometry.location); 
        
        this.marker = new google.maps.Marker({ 
                title:address, 
            map: map,  
            position: results[0].geometry.location 
        }); 
                var infowindow = new google.maps.InfoWindow({ 
                    content: '<strong>'+address+'</strong><br/>'+'纬度: '+results[0].geometry.location.jb+'<br/>经度: '+results[0].geometry.location.kb
                }); 
                infowindow.open(map,marker); 
      } else { 
        alert("Geocode was not successful for the following reason: " + status); 
      } 
    }); 
  } 
</script> 
</head> 
<body onload="initialize()"> 
  <div> 
    <input id="address" type="textbox" value="上海市"> 
    <input type="button" value="地址解析" onclick="codeAddress()"> 
  </div> 
<div id="map_canvas" style="height:90%;top:30px"></div> 
</body> 
</html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值