Question

我有一个包含2个信息框的Google地图。信息框正在运行，但Geocoder按钮由于某种原因没有。

我可以在一个页面上自己使用信息框工作，我可以让Geocoder在一个页面上自行工作，但我不能让它们在同一页面上工作。

我想要的是能够输入地址并放置一个引脚并缩放到该位置（就像下面链接到Googles示例一样）。

地理编码代码来自Google：https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

infobox.js来自：https://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js

以下是头脑中的内容：

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_REMOVED&sensor=false">
</script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var secheltLoc = new google.maps.LatLng(-27.532861,134.693340),
     markers,
        myMapOptions = {
         zoom: 7,
        center: secheltLoc,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

function initMarkers(map, markerData) {
    var newMarkers = [],
        marker;

    for(var i=0; i<markerData.length; i++) {
        marker = new google.maps.Marker({
            map: map,
            draggable: false,
            position: markerData[i].latLng,
            visible: true
        }),
        boxText = document.createElement("div"),
        //these are the options for all infoboxes
        infoboxOptions = {
            content: boxText,
            disableAutoPan: false,
            zIndex: null,
            maxWidth: 0,
            boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                opacity: 0.85,
            },
            closeBoxMargin: "6px 2px 0px 0px",
            closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
            infoBoxClearance: new google.maps.Size(1, 1),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };

        newMarkers.push(marker);
        //define the text and style for all infoboxes
        boxText.style.cssText = "border: 1px solid black; margin-top: 3px; background: #fff; padding: 1px; font-size: 11px; white-space:nowrap; padding-right: 20px";
        boxText.innerHTML = markerData[i].BusinessName;
        //Define the infobox
        newMarkers[i].infobox = new InfoBox(infoboxOptions);
        //Open box when page is loaded
        newMarkers[i].infobox.open(map, marker);
        //Add event listen, so infobox for marker is opened when user clicks on it.  Notice the return inside the anonymous function - this creates
        //a closure, thereby saving the businessname of the loop variable i for the new marker.  If we did not return the value from the inner function, 
        //the variable i in the anonymous function would always refer to the last i used, i.e., the last infobox. This pattern (or something that
        //serves the same purpose) is often needed when setting function callbacks inside a for-loop.
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                newMarkers[i].infobox.open(map, this);
                map.panTo(markerData[i].latLng);
            }
        })(marker, i));
    }

    return newMarkers;
}

        //here the call to initMarkers() is made with the necessary data for each marker.  All markers are then returned as an array into the markers variable
markers = initMarkers(map, [

{ latLng: new google.maps.LatLng(-33.878301, 150.981126), 
BusinessName: 'Vegetarian Health' },

{ latLng: new google.maps.LatLng(-33.799211, 150.926357), 
BusinessName: 'Business Name Two' }

]);

}


// Geocoder below

function codeAddress() {
var address = document.getElementById('address').value;
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);
}
});
}

</script>

以下是身体中的内容：

<body onload="initialize()">
<div id="panel">
  <input id="address" type="textbox" value="Sydney, NSW">
  <input type="button" value="Geocode" onclick="codeAddress()">
</div>

<div style="width:850px; height: 600px" id="map_canvas"></div>
</body>

Answer 1

报告错误：

Uncaught TypeError: Cannot read property 'setCenter' of undefined

所以似乎map是本地定义的。实际上，它被定义为全局：

var geocoder;
var map;

但在这里再次出现在当地：

geocoder = new google.maps.Geocoder();
var secheltLoc = new google.maps.LatLng(-27.532861,134.693340),
     markers,
    myMapOptions = {
        zoom: 7,
        center: secheltLoc,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

因此，,之前的map应更改为;：

        ...
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

无法让Geocoder在Google Map API中运行

1 个答案: