我在“我的地图”中有一个自定义Google地图,它有多个反映路线拾取区域的多边形(例如星期一皮卡区,星期二皮卡区等),基本上我想要做的是找出特定的哪个多边形地址落入。这样我就可以通过单击按钮来确定新用户将要属于哪一天的路线而不必复制地址,转到地图,粘贴,点击搜索并查看它所处的多边形。
我是谷歌地图的新手,对API或KML / KMZ文件一点也不熟悉。我看到我可以导出一个自我更新的KML或KMZ文件,所以也许我可以将它存储在服务器上,然后程序使用它来找出多边形地址,但我不知道如何用c#或我是否需要使用javascript,如果是这样,我该怎么做?或者有没有办法直接通过GET或其他东西查询谷歌?
更新 使用以下代码,我已经能够加载谷歌提供的网络链接的kml文件。现在我想知道如何通过单击按钮,找到输入的地址所加载的kml中的哪个多边形图层。我将继续尝试使用我找到的内容进行更新。
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 11,
center: {lat: 39.10342, lng: -76.87271}
});
var kmlLayer = new google.maps.KmlLayer();
var kmlUrl = 'http://xxxxxxxxxxx.com/crew/map/test.kml';
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map
};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div id="googleMap" style="width:600px;height:450px;"></div>
</body>
</html>
答案 0 :(得分:0)
我想知道的是你想知道一个地址落入哪个多边形。如果是这种情况,则containsLocation
对您有益。将地址“latlng
值传递给每个多边形,并查看其中的坐标是否在其中。
有点像这样
var polygons = [];
function checkIfPartOfPolygon(addressLatLng, polygon){
return google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle);
}
function foo(){
var address = {};
for (var i=0; i<polygons.length; i++){
var addressPartOfPolygon = checkIfPartOfPolygon(address.latlng, polygons[i]);
if (addressPartOfPolygon){
//address is part of current polygon, do something here
break;
}
}
}
上找到containsLocation的官方示例
答案 1 :(得分:0)
所以这是我在混合和匹配来自不同网站的各种信息后最终得到的结果。它加载存储在服务器上的kml,获取用户输入的地址,以kml的多边形搜索它,如果找到它然后计算出它的当天,然后适当地设置拾取下拉列表。
请注意,我隐藏了地图,并且没有在其上设置任何标记或任何标记;我纯粹用它来查找属于哪个多边形地址。
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script src="../scripts/v3_epoly.js" type="text/javascript"> </script>
<script type="text/javascript">
var geoXml = null;
var map = null;
var geocoder = null;
var toggleState = 1;
var infowindow = null;
var marker = null;
function initialize() {
geocoder = new window.google.maps.Geocoder();
infowindow = new window.google.maps.InfoWindow({size: new window.google.maps.Size(150,50) });
// create the map
var myOptions = {
zoom: 12,
center: new window.google.maps.LatLng(43.502745, -116.240845),
mapTypeControl: true,
mapTypeControlOptions: {style: window.google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: window.google.maps.MapTypeId.ROADMAP
}
map = new window.google.maps.Map(document.getElementById("map_canvas"),
myOptions);
geoXml = new window.geoXML3.parser({map: map, singleInfoWindow: true, infoWindow: infowindow});
geoXml.parse('map/routemap-v2.kml');
}
function showAddress() {
var address = $("#<%=txtCustomerAddress.ClientID%>").val() + ', ' + $("#<%=txtCustomerCity.ClientID%>").val() + ', ' + $("#<%=txtCustomerState.ClientID%>").val() + ' ' + $("#<%=txtCustomerZipcode.ClientID%>").val();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status === window.google.maps.GeocoderStatus.OK) {
var point = results[0].geometry.location;
for (var i=0; i<geoXml.docs[0].gpolygons.length; i++) {
if (geoXml.docs[0].gpolygons[i].Contains(point)) {
var layerName = geoXml.docs[0].placemarks[i].name;
var day = "";
if (layerName.indexOf("Monday") >= 0) {
day = "Monday";
}
else if (layerName.indexOf("Tuesday") >= 0) {
day = "Tuesday";
}
else if (layerName.indexOf("Wednesday") >= 0) {
day = "Wednesday";
}
else if (layerName.indexOf("Thursday") >= 0) {
day = "Thursday";
}
else if (layerName.indexOf("Friday") >= 0) {
day = "Friday";
}
else if (layerName.indexOf("Saturday") >= 0) {
day = "Saturday";
}
else if (layerName.indexOf("Sunday") >= 0) {
day = "Sunday";
} else {
day = layerName;
}
$("#<%=PickUpDay.ClientID%>").val(day);
i = 999; // exit loop
}
}
} else {
alert("Address, as inputed, is not within the limits of any of the current routes. Please manually consult pick up day or edit address and try again.");
}
});
}
</script>
<body onload="initialize()">
<div id="map_canvas" style="width: 0; height: 0; margin-bottom: 10px; border:1px solid #999; display: none"></div>
</body>