Question

谷歌的simple geocode example似乎很简单，这就是我需要的所有功能。但是，我有多个谷歌地图是通过qTip工具提示生成的，所以我希望地理编码搜索字段位于每个地图的顶部（不在它们之上）。查看我当前的 FIDDLE 。什么是最好的方法呢？

Answer 1

在div上使用一些合适的CSS。见这里

https://files.nyu.edu/hc742/public/googlemaps/geocodesp.html

你必须取消选中'SP'才能在我的城市之外工作。

  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
  #menu {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    font-family: Arial, sans-serif;
  }
 ... ... ... 

<div id="map_canvas"></div>
<div id="menu">
  <b>address:</b>
  <input id="text_address" type="text" size="60" onkeyup="checkReturn(event)">
  <input id="check_sp" type="checkbox" checked="checked">SP
  <input type="button" value="clear" onclick="document.getElementById('text_address').value=''; document.getElementById('text_address').focus()">
  <input id="button3" type="button" value="clear markers" onclick="clearMarkers()">

</div>

Answer 2

解决。我基本上使用jQuery将我的搜索框附加到qTip的容器，然后使用jQuery live（）收听搜索按钮的点击。我懒得创造一个新的小提琴，但这里有一些代码：

在qTip的“render”事件中：

var geocoder;
geocoder = new google.maps.Geocoder();

...

api.map = new google.maps.Map(container[0], myOptions);
$(container).append('<div class="geosearch"><input type="text" class="geosearchinput" value="" /><button type="button" class="geosearchbutton">Search</button></div>');

...

$('button.geosearchbutton').live('click', function() {
    var address = $(this).prev('input.geosearchinput').val();
    geocoder.geocode({ 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            ... add marker and handle markers array ...

        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
});

JS在地图上生成地理编码搜索

2 个答案: