Question

您好我是Google Maps APi的新手。

我创建了一个脚本，对地址进行地理编码并绘制标记。

我想在标记位置添加一个信息窗口，其中包含用户在地址栏中输入的地址。

我遇到问题，信息窗口没有显示，也许是在脚本中的错误位置。

你能看看。

这是我的脚本，谢谢你的帮助

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>


 var geocoder;
 var map;


 //set the map center
   function initialize() {
 geocoder = new google.maps.Geocoder();
 var latlng = new google.maps.LatLng(43.6481, -79.4042);
 var mapOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 }

// Creating an InfoWindow          
var infowindow = new google.maps.InfoWindow({});


//on click of the drop the dot button, place a marker
 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
        title: address
    });

    // Adding a click event to the marker
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent('address');
            infowindow.open(map, this);
        }); 
   } else {
    alert("Geocode was not successful for the following reason: " + status);
   }
 });

});

</script>
</head>
<body onload="initialize()">

<div id="map_canvas" style="height:800px;width:1000px"></div>

<div>
    <input id="address" type="textbox" value="Type the address here">
    <input type="button" value="Drop the dot" onclick="codeAddress()">
</div>

Answer 1

在为javascript错误调整了一些内容后，它对我有用：

<script>


 var geocoder;
 var map;


 //set the map center
   function initialize() {
 geocoder = new google.maps.Geocoder();
 var latlng = new google.maps.LatLng(43.6481, -79.4042);
 var mapOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 }

// Creating an InfoWindow          
var infowindow = new google.maps.InfoWindow({});


//on click of the drop the dot button, place a marker
 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,
        title: address
    });

    // Adding a click event to the marker
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent('address');
            infowindow.open(map, this);
        }); 
   } else {
    alert("Geocode was not successful for the following reason: " + status);
   }
 });

}

</script>

如何在地理编码器放置标记后创建信息窗口

1 个答案: