我正在努力引入第二次搜索以像第一次搜索一样放置标记。 我已经为一般搜索和标记位置编写了如下代码，如您所见，我添加了一个额外的搜索框，但无法弄清楚如何使该搜索框与第一个搜索框的功能相同。
基本上我试图用一个提交按钮同时标记两个不同的位置。
谁能帮我指出正确的方向
<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//declare namespace
var up206b = {};
//declare map
var map;
function trace(message)
{
if (typeof console != 'undefined')
{
console.log(message);
}
}
up206b.initialize = function()
{
var latlng = new google.maps.LatLng(34.070264, -118.4440562);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
var geocoder = new google.maps.Geocoder();`
up206b.geocode = function()
{
var address = $('#address').val();
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);
}
});
}
up206b.geocode = function()
{
var address = $('#address').val();
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);
}
});
}
var address = $('#address').val();
</script>
</head>
<body onload="up206b.initialize()">
<div style= "float:left">
</div>
<div style="width:380px; height: 100%; overflow:auto; float:right; padding-left:10px; padding-right:10px;">
<h1>Map Search</h1>
<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;">
<input type="text" id="address">
<input type="text" id="">
<input type="button" value="Submit" onClick="up206b.geocode()">
</div>
</div>
<div id="map_canvas" style="height:100%; margin-left:400px;"></div>
</body>
</html>
最佳答案
获取两个输入的值，对存在的值进行地理编码并将它们添加到 map 。
<!DOCTYPE html>
<html>
<head>
<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//declare namespace
var up206b = {};
//declare map
var map;
function trace(message)
{
if (typeof console != 'undefined')
{
console.log(message);
}
}
up206b.initialize = function()
{
var latlng = new google.maps.LatLng(34.070264, -118.4440562);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
var geocoder = new google.maps.Geocoder();
up206b.geocode = function()
{
var addresses = [ $('#address').val(), $('#address2').val()];
addresses.forEach(function(address){
if(address){
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>
</head>
<body onload="up206b.initialize()">
<div style="position: absolute; top: 0; right: 0; width:380px; height: 500px; overflow:auto; float:right; padding-left:10px; padding-right:10px;">
<h1>Map Search</h1>
<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;">
<input type="text" id="address">
<input type="text" id="address2">
<input type="button" value="Submit" onClick="up206b.geocode()">
</div>
</div>
<div id="map_canvas" style="height: 500px; width: 500px;"></div>
</body>
</html>关于javascript - google maps api 附加搜索框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35451848/