如何根据用户输入的地点创建多边形

Question

基本上我想创建一个基于用户搜索地点的多边形。例如，如果用户搜索（Sector 56，Gurgaon），那么如何获得用户搜索的多边形坐标。

实施例，有这样的网站的结果： https://grabhouse.com/seeker/result-6BNN3pbCk

这里，用户已经搜索了“扇区56，古尔冈”，并将基于它执行以下操作的东西搜索（由所示的“检查元素”属性） ：

• 获取经纬度长搜索的
• 获取多边形坐标
• 基于 多边形坐标显示趴在那个多边形的属性。

如何做到这一点？

Answer 1

<style>#map_canvas {height: 400px;}</style> 
<div id="map_canvas"></div> 
<script src="http://maps.googleapis.com/maps/api/js?libraries=geocoder"></script> 
<input type="text" id="search_address" value=""/> 
<button onclick="search();">Search</button> 
<hr> 
<input id="display" placeholder="coordinates"/> 
<script> 
var geocoder; 
var polygonPoints = []; 
var polygonObject; 
var markers = []; // marker objects 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var myCenter = new google.maps.LatLng(50.5, 4.5); 
    var myOptions = { 
    zoom: 6, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: myCenter 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

function search() { 
    geocoder.geocode(
    {'address': document.getElementById("search_address").value}, 
    function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     var location = results[0].geometry.location; 
     // let's add that point to the polygon 
     addPointToPolygon(location); 
     // add a marker there. Feel free to delete next line, if you don't want a marker there 
     markers.push(newMarker(location, map)); 
     // center map on that point 
     map.setCenter(location); 
     // display the points in an text element (input) 
     displayPoints(polygonPoints); 
     // make sure the map shows all the points 
     fitBounds(polygonPoints, map); 
     } 
    } 
); 
}; 

function addPointToPolygon(location) { 
    // add the point to the array 
    polygonPoints.push(location); 
    // a polygon must have 3 points or more 
    if(polygonPoints.length >= 3) { 
    // first destroy the previous polygon (with 1 fewer point) 
    if(polygonObject) { 
     polygonObject.setMap(null); 
    } 
    // new polygon 
    polygonObject = polygon(polygonPoints, map); 
    } 
} 

// returns a polygon object 
function polygon(points, map) { 
    // Construct the polygon. 
    return new google.maps.Polygon({ 
    paths: points, 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35, 
    map: map 
    }); 
} 

function newMarker(location, map) { 
    return new google.maps.Marker({ 
    position: location, 
    map: map 
    }); 
} 

function displayPoints(locations) { 
    for (var i in locations) { 
    document.getElementById("display").value += locations[i].lat() +','+ locations[i].lng() +' ; '; 
    } 
} 

function fitBounds(locations, map) { 
    // only fit bounds after 2 or more points. 
    if (locations.length < 2) { 
    return false; 
    } 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i in locations) { 
    bounds.extend(locations[i]); 
    } 
    map.fitBounds(bounds); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script>