Question

我收到此错误TypeError：地标未定义我使用google api和openlayer api。帮助我。我正在使用google api v3和openLayer地图我想在文本框中提供地址并单击按钮并执行地理编码。在我的代码中我得到了这个错误TypeError：placemarks未定义这是我的完整代码

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>OpenLayers: Geocoding Data Google + OSM</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
        <link rel="stylesheet" href="style.css" type="text/css" />

        <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyBz7CjlxpWO8HgM_ATuq3_F85wfAoupXck&language=de"></script>
        <script src="OpenLayers.js"></script>
        <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script>
        <style type="text/css">
            #map {
                width: 100%;
                height: 80%;
                border: 1px solid black;
            }
        </style>
        <script type="text/javascript">
            var map, vectors, geocoder;

            // Define marker style
            // @fixme: where can we get information about these marker styles
            var markerStyle = {
                externalGraphic : 'img/marker.png',
                pointRadius : 12
            };

            function init() {
                // Add the map
                var options = {
                    projection : new OpenLayers.Projection("EPSG:900913"),
                    displayProjection : new OpenLayers.Projection("EPSG:4326"),
                    units : "m",
                    maxResolution : 156543.0339,
                    maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
                };
                map = new OpenLayers.Map('map', options);

                // Add the OpenStreetMaps Layer
                var osm = new OpenLayers.Layer.OSM.Mapnik("OpenStreetMap (Mapnik)", {
                    displayOutsideMaxExtent : true,
                    wrapDateLine : true,
                    buffer : 0
                });
                map.addLayer(osm);

                // Add the google maps Layer
                var gmap = new OpenLayers.Layer.Google("Google", {
                    sphericalMercator : true
                });
                map.addLayer(gmap);

                // Add a vector Layer which holds the markers
                vectors = new OpenLayers.Layer.Vector("Vector Layer");
                map.addLayer(vectors);

                // Allow marker drag
                var dragCtl = new OpenLayers.Control.DragFeature(vectors);
                dragCtl.onComplete = function(feature, position) {
                    var ll = map.getLonLatFromPixel(position);
                    var coords = ll.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
                    alert('New coordinates: ' + coords.lon + ' ' + coords.lat);
                }
                map.addControl(dragCtl);
                dragCtl.activate();

                map.addControl(new OpenLayers.Control.LayerSwitcher());

                // Center map
                var centerLonLat = new OpenLayers.LonLat(10.5, 51.6).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                map.setCenter(centerLonLat, 5);
            }

                function codeAddress() {
                    var address = document.getElementById('address').value;
                    geocoder = new google.maps.Geocoder();
                    geocoder.geocode({
                        'address' : address
                    }, gotGeocodes);
                    alert("hiiii");

                }



            function gotGeocodes(response) {
                // Clear markers from vector layer
                alert("hi");
                vectors.destroyFeatures();
                if (typeof response.location !== 'undefined') {
                    alert("Sorry, we were unable to geocode that address");
                } else {
                    var placemarks = response.Placemark;
                    // We may get more than one result here. So you can display
                    // all results or just the first like here
                    if (placemarks.length > 0) {
                        var coords = placemarks[0].Point.coordinates;
                        var ll = new OpenLayers.LonLat(coords[0], coords[1]).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                        var pointGeometry = new OpenLayers.Geometry.Point(ll.lon, ll.lat);
                        var point = new OpenLayers.Feature.Vector(pointGeometry, null, markerStyle);
                        vectors.addFeatures([point]);
                        map.setCenter(ll, 16);
                    }
                }
            }
        </script>
    </head>
    <body onload="init();">
        <h1 id="title">Get geocoding data from google</h1>
        <p id="shortdesc">
            Get geocoding data from google an show it in openstreetmap or google maps.
        </p>
        <form action="#" onsubmit="codeAddress(); return false;">
            <strong>Enter an address:</strong>
            <input type="text" id="address" name="q" value="" size="40" />
            <input type="submit" name="find" value="Search" />
        </form>
        <div id="map"></div>
    </body>
</html>

OpenLayers：Geocoding Data Google + OSM

0 个答案: