Google maps 拥有谷歌地图V3，可以'；t从用户输入更新map.setCenter_Google Maps_Geocode

Google maps 拥有谷歌地图V3，可以'；t从用户输入更新map.setCenter

google-maps

Google maps 拥有谷歌地图V3，可以'；t从用户输入更新map.setCenter,google-maps,geocode,Google Maps,Geocode,我是新手，但我有一个从用户的W3C浏览器地理编码信息加载的Google V3地图，我从地理编码对象和更新输入框中提取国家、州和城市。如果用户输入街道地址，我想通过Google对其进行地理编码，并更改map.setCenter和setZoom，并显示更新后的地图。当这起作用时，我想添加一个标记和信息窗口。尽管经过数小时的研究和试验，我还是无法让地理代码和更新生效。Chrome中的开发者工具似乎表明geocoder.geocode行的执行停止/失败，该行以粗体显示。这是相关代码 var map, g

我是新手，但我有一个从用户的W3C浏览器地理编码信息加载的Google V3地图，我从地理编码对象和更新输入框中提取国家、州和城市。如果用户输入街道地址，我想通过Google对其进行地理编码，并更改map.setCenter和setZoom，并显示更新后的地图。当这起作用时，我想添加一个标记和信息窗口。尽管经过数小时的研究和试验，我还是无法让地理代码和更新生效。Chrome中的开发者工具似乎表明geocoder.geocode行的执行停止/失败，该行以粗体显示。这是相关代码

var map, geocoder, marker, infowindow; //global variables

function initializeMap() {
// Try W3C Geolocation to geolocate desktop user
//initialize Google map, geolocate desktop user, and display after page loads
//find country, state, and city for the user's location  -  this all works
}
window.onload = initializeMap;

//change the Google Map after a user enters a street address
$("#streetAddress").blur(function() {
    //if state, city and street address locations are present
if ( $(this).val().length > 0 && $("#state").val().length > 0 && $("#city3").val().length > 0  ) {
    var gAddress =  [$(this).val() + ", " + $("#city3").val() + ", " + $("#state").val()] ;
    //get coordinates of this address
    //if no geocode object exists, create one
    if (!geocoder) {
    geocoder = new google.maps.Geocoder(); //create Geocoder object else use existing one from initializeMap() ?
    }       
    //create a GeocoderRequest object with user's street address
    var geoCoderRequest = {address:  gAddress} 
    //make a Geocoder request
    geocoder.geocode( geoCoderRequest, function(results, status) {  **//this line fails**
    //check if status is OK
            if ( status === google.maps.GeocoderStatus.OK) {
            //update center of existing map on location returned for this address
            map.setCenter(results[0].geometry.location);
            map.setZoom(14);
            }   
    });         
    } else {
            return; //no action if gAddress is incomplete
        }
});

根据，地址应该是一个字符串，但您已经将gAddress创建为一个数组

尝试：

更新：为了响应您希望在最初加载地图后进行缩放（例如响应用户输入），下面是一个简单的示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    var map;
    var start = 1;

    function initialize() {
        var homeLatlng = new google.maps.LatLng(51.476706,0); // London

        var myOptions = {
            zoom: 15,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function setZoom() {
        map.setZoom(18);
    }

    function setTimedZoom() {
        map.setZoom(start);

        start = start+1;
        if (start > 18) {
            start = 1;  // lets go round again and again; in reality you'd probably stop zooming at this point.
        }

        setTimeout(setTimedZoom, 3000);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <a href="javascript:setZoom()">Zoom In</a>
    <a href="javascript:setTimedZoom()">Timed</a>
    <div id="map_canvas"></div>
</body>
</html>


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
var映射；
var start=1；
函数初始化（）{
var homeLatlng=new google.maps.LatLng（51.476706,0）；//伦敦
变量myOptions={
缩放：15，
中心：家庭式，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
}
函数setZoom（）{
map.setZoom（18）；
}
函数setTimedZoom（）{
map.setZoom（开始）；
开始=开始+1；
如果（开始>18）{
start=1；//让我们一次又一次地循环；实际上，此时您可能会停止缩放。
}
setTimeout（setTimedZoom，3000）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

是的，谢谢。这很有帮助。代码现在通过'if status==OK'正确执行，我得到了一个OK，但它没有将center设置为用户输入地址或setZoom。经过进一步的工作，谷歌地图似乎无法更新。我哪里也没读过，但这是我的行为。当我创建一个新地图（与第一次相同，但带有来自用户新输入地址的地理代码）时，它会创建一个新的“更新”地图。我还有几个问题要解决，但我似乎走上了正确的道路。奇怪的是，可以使用光标手动移动地图，但显然不可能使用更新代码执行此操作。您的代码一定有问题，我在更新现有地图以更改中心或缩放MMM时没有遇到问题。上面的两个函数是我仅有的两个地图代码。第一个函数是从Google文档中复制的。变量map和geocode是全局变量，因此第二个函数可以访问它们。你看到另一个错误了吗？你知道这样的教程吗。我已经做了几天的搜索、思考和试验，但还没有找到配方。任何帮助都将不胜感激。建议使用console.log和firebug查看您的地理编码器请求到底发生了什么

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    var map;
    var start = 1;

    function initialize() {
        var homeLatlng = new google.maps.LatLng(51.476706,0); // London

        var myOptions = {
            zoom: 15,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function setZoom() {
        map.setZoom(18);
    }

    function setTimedZoom() {
        map.setZoom(start);

        start = start+1;
        if (start > 18) {
            start = 1;  // lets go round again and again; in reality you'd probably stop zooming at this point.
        }

        setTimeout(setTimedZoom, 3000);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <a href="javascript:setZoom()">Zoom In</a>
    <a href="javascript:setTimedZoom()">Timed</a>
    <div id="map_canvas"></div>
</body>
</html>