Javascript 如何使用输入的邮政编码将google地图居中_Javascript_Google Maps Api 3

Javascript 如何使用输入的邮政编码将google地图居中

javascript google-maps-api-3

Javascript 如何使用输入的邮政编码将google地图居中,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我试图在init之后将google地图居中放置到输入按钮的zipcode中我做错了什么？有人能给我一个解决方案吗 <!DOCTYPE html > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"

我试图在init之后将google地图居中放置到输入按钮的zipcode中

我做错了什么？有人能给我一个解决方案吗

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>g</title>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                font-family: 'Arial','sans-serif';
                font-size:12px;
                margin: 0;
                padding: 0;
            }

            #map {
                width: 75%;
                height: 100%;
                float: left;
            }

            #right-panel {
                width: 24%;
                float: left;
                text-align: left;
                padding-left: 0.5%;
            }

            #logo_top {
            width: 20%;
            height:5%;
            float: left;
            background-image: url(http://darwin.pytalhost.de/vf_top_LS4.png);
            -moz-background-size:100% 100%; /* Firefox */
            -webkit-background-size:100% 100%; /* Safari, Chrome */
            background-size:100% 100%; /* Opera, IE, W3C Standard */
            padding: 10px;
            margin: 10px;
            }

        </style>
  </head>

  <body>
        <div id="map"></div>
        <div id ="logo_top"></div>
        <form>
            PLZ: <input type="text" name="PLZ" id="PLZ"><br>
            <button onclick="codeAddress(PLZ)">Suchen</button>
        </form>
        <div id="right-panel">
        <br>
        <div id="directions-panel"></div>
        </div>

        <script>        
      var customLabel = {
        restaurant: {
          label: 'BE'
        },
        bar: {
          label: 'BS'
        }
      };    

            var geocoder;

            function initMap() {            
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: new google.maps.LatLng(-33.863276, 151.207977),
                    zoom: 12
                });
                geocoder = new google.maps.Geocoder();
        var infoWindow = new google.maps.InfoWindow;

                //eigenes
                var summaryPanel = document.getElementById('directions-panel');
                summaryPanel.innerHTML = '';

          // Change this depending on the name of your PHP or XML file
          downloadUrl('http://darwin.pytalhost.de/create_markers.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label   + '1'               
              });

              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });       

                            //eigenes
                            summaryPanel.innerHTML += address   + '<br>';

            });
          });
        }               

      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}

            function codeAddress(zipCode) {
                    geocoder.geocode({
                            'address': zipCode, "componentRestrictions":{"country":"DE"}
                    }, 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);
                            }
                    });
            }       

    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
    </script>

  </body>
</html>


G
html，正文{
宽度：100%；
身高：100%；
字体系列：“Arial”和“sans-serif”；
字体大小：12px；
保证金：0；
填充：0；
}
#地图{
宽度：75%；
身高：100%；
浮动：左；
}
#右面板{
宽度：24%；
浮动：左；
文本对齐：左对齐；
左：0.5%；
}
#标志{
宽度：20%；
身高：5%；
浮动：左；
背景图片：url(http://darwin.pytalhost.de/vf_top_LS4.png);
-moz背景大小：100%100%；/*Firefox*/
-webkit背景尺寸：100%100%；/*Safari，Chrome*/
背景尺寸：100%100%；/*Opera，即W3C标准*/
填充：10px；
利润率：10px；
}
PLZ:

苏晨


var customLabel={
餐厅：{
标签：“BE”
},
酒吧：{
标签：“BS”
}
};    
var地理编码器；
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：新google.maps.LatLng（-33.863276151.207977），
缩放：12
});
geocoder=新的google.maps.geocoder（）；
var infoWindow=new google.maps.infoWindow；
//伊格纳斯
var summaryPanel=document.getElementById（'directions-panel'）；
summaryPanel.innerHTML=''；
//根据PHP或XML文件的名称进行更改
下载URL（'http://darwin.pytalhost.de/create_markers.php，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（'marker'）；
Array.prototype.forEach.call（markers，function（markereem））{
var name=markereem.getAttribute（'name'）；
var address=markerem.getAttribute（'address'）；
var type=markereem.getAttribute（'type'）；
var point=new google.maps.LatLng(
parseFloat（markerem.getAttribute（'lat'）），
parseFloat（markerem.getAttribute（'lng'））；
var infowincontent=document.createElement（'div'）；
var strong=document.createElement（'strong'）；
strong.textContent=名称
infowincontent.appendChild（强）；
infowincontent.appendChild（document.createElement（'br'））；
var text=document.createElement（'text'）；
text.textContent=地址
infowincontent.appendChild（文本）；
var icon=customLabel[type]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
标签：icon.label+“1”
});
marker.addListener（'click'，function（））{
setContent（infowincontent）；
信息窗口。打开（地图、标记）；
});       
//伊格纳斯
summaryPanel.innerHTML+=地址+'
'；
});
});
}               
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}
函数代码地址（zipCode）{
地理编码({
“地址”：zipCode，“组件限制”：{“国家”：“DE”}
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}

对我来说，它看起来并不是那么简单


<!DOCTYPE html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>g</title>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                font-family: 'Arial','sans-serif';
                font-size:12px;
                margin: 0;
                padding: 0;
            }

            #map {
                width: 75%;
                height: 100%;
                float: left;
            }

            #right-panel {
                width: 24%;
                float: left;
                text-align: left;
                padding-left: 0.5%;
            }

            #logo_top {
            width: 20%;
            height:5%;
            float: left;
            background-image: url(http://darwin.pytalhost.de/vf_top_LS4.png);
            -moz-background-size:100% 100%; /* Firefox */
            -webkit-background-size:100% 100%; /* Safari, Chrome */
            background-size:100% 100%; /* Opera, IE, W3C Standard */
            padding: 10px;
            margin: 10px;
            }

        </style>
  </head>

  <body>
        <div id="map"></div>
        <div id ="logo_top"></div>

           <input type="text" name="PLZ" id="PLZ"><br>
            <button onclick="codeAddress()">Suchen</button>


        <div id="right-panel">
        <br>
        <div id="directions-panel"></div>
        </div>

        <script>        
      var customLabel = {
        restaurant: {
          label: 'BE'
        },
        bar: {
          label: 'BS'
        }
      };    
 var map
            var geocoder;

            function initMap() {            
               map = new google.maps.Map(document.getElementById('map'), {
                    center: new google.maps.LatLng(-33.863276, 151.207977),
                    zoom: 12
                });
                geocoder = new google.maps.Geocoder();
        var infoWindow = new google.maps.InfoWindow;

                //eigenes
                var summaryPanel = document.getElementById('directions-panel');
                summaryPanel.innerHTML = '';

          // Change this depending on the name of your PHP or XML file
        }               

      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = codeAddress;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }


            function codeAddress() {
            var zipCode = document.getElementById("PLZ").innerHTML;
                    geocoder.geocode({
                            'address': zipCode, "componentRestrictions":{"country":"DE"}
                    }, 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);
                            }
                    });
            }


    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
    </script>

  </body>
</html>

G
html，正文{
宽度：100%；
身高：100%；
字体系列：“Arial”和“sans-serif”；
字体大小：12px；
保证金：0；
填充：0；
}
#地图{
宽度：75%；
身高：100%；
浮动：左；
}
#右面板{
宽度：24%；
浮动：左；
文本对齐：左对齐；
左：0.5%；
}
#标志{
宽度：20%；
身高：5%；
浮动：左；
背景图片：url(http://darwin.pytalhost.de/vf_top_LS4.png);
-moz背景大小：100%100%；/*Firefox*/
-webkit背景大小：100%100%/*