Javascript 将Google地图设置为加载时对邮政编码进行地理编码
我正在使用GoogleMapsAPI显示基于邮政编码的地图,然后使用Google的地理编码服务()将邮政编码转换为纬度和经度并显示地图 Google页面上的示例使用一个按钮来激活地理编码功能,我将该代码作为起点。但是,我不想要按钮,我想要硬编码邮政编码(稍后我将用一个来自自定义元输入的字符串替换它)。如何调整此代码,以获取我在address变量中声明的邮政编码,并在初始加载时加载它,而不是单击按钮 希望这是有意义的Javascript 将Google地图设置为加载时对邮政编码进行地理编码,javascript,function,google-maps,Javascript,Function,Google Maps,我正在使用GoogleMapsAPI显示基于邮政编码的地图,然后使用Google的地理编码服务()将邮政编码转换为纬度和经度并显示地图 Google页面上的示例使用一个按钮来激活地理编码功能,我将该代码作为起点。但是,我不想要按钮,我想要硬编码邮政编码(稍后我将用一个来自自定义元输入的字符串替换它)。如何调整此代码,以获取我在address变量中声明的邮政编码,并在初始加载时加载它,而不是单击按钮 希望这是有意义的 <script src="http://maps.googleapis.c
<script src="http://maps.googleapis.com/maps/api/js?key=XXX&sensor=false" type="text/javascript"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = 'PO19 1DQ';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<input type="button" value="Geocode" onclick="codeAddress()">
<div id="map-canvas" style="width:100%;height:300px;"></div>
var地理编码器;
var映射;
函数初始化(){
geocoder=新的google.maps.geocoder();
var latlng=新的google.maps.latlng(-34.397150.644);
变量映射选项={
缩放:8,
中心:拉特林,
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map(document.getElementById('map-canvas'),mapOptions);
}
函数代码地址(){
变量地址='PO19 1DQ';
geocoder.geocode({'address':address},函数(结果,状态){
if(status==google.maps.GeocoderStatus.OK){
map.setCenter(结果[0].geometry.location);
var marker=new google.maps.marker({
地图:地图,
位置:结果[0]。几何体。位置
});
}否则{
警报('地理编码因以下原因未成功:'+状态);
}
});
}
google.maps.event.addDomListener(窗口“加载”,初始化);
只需从initialize()函数的底部调用codeAddress,例如:
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
}
已有加载
事件监听器
google.maps.event.addDomListener(window, 'load', initialize);
因此,将codemaddress()
方法放在其中
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
}
选中此复选框,您无法在初始化时执行此操作,因为地理代码是异步的,您在初始化时不会进行本地化。但是,您可以在初始化后立即调用geocode,并在地理定位完成后立即进行中心处理:
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
}
function codeAddress() {
var address = 'PO19 1DQ';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
当然,您可能会看到一些延迟,如果这是问题所在,那么您可以:
- 使用隐藏地图div初始化网页,并在地理编码结果可用时显示
- 在页面加载后立即开始地理编码,并在地理编码完成时初始化映射
0,0
,这会在等待地理编码发生时停止地图闪烁另一个位置的视图。