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

谷歌的simple geocode example看起来很简单，这就是我需要的所有功能。不过，我通过qTip工具提示生成了多个Google地图，因此我希望地理编码搜索字段位于每个地图的顶部（而不是它们上方）。看我目前的FIDDLE。什么是最好的方式去做这件事？JS在地图上生成地理编码搜索

来源

2012-04-12 Michael

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

在qTip的“渲染”事件：

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); 
     } 
    }); 
});

来源

2012-04-17 16:05:07 Michael

在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>

来源

2012-04-12 17:50:58

一半。因为我在不同的位置（工具提示内）生成了多个地图，所以我相信我必须在JS生成每个地图后立即生成表单字段。（看我的小提琴。）这是混淆我的那一点。我会继续玩... – Michael 2012-04-12 18:26:54

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

回答

相关问题