koz*_*zer 10 javascript php google-maps
我已经在网上搜索过,我没有找到任何解决方案...我找到的任何解决方案都不适用于我...我有一行VARCHARS和另一个这些GEOMETRY类型,例如:
POLYGON((23.953261 37.733372,23.953623 37.733202,23.953572 37.733132,23.954075 37.732896,23.954126 37.732966,23.954550 37.732767,23.954566 37.732698,23.954467 37.732603,23.954258 37.732476,23.953007 37.733041,23.953207 37.733303,23.953261 37.733372),(23.953695 37.732771,23.954243 37.732524,23.954427 37.732635, 23.954496 37.732702,23.954484 37.732757,23.954133 37.732921,23.954087 37.732859,23.953525 37.733122,23.953577 37.733192,23.953292 37.733326,23.953080 37.733050,23.953695 37.732771))
和
MULTIPOLYGON(((23.949134 37.734540,23.948811 37.734215,23.948775 37.734238,23.949077 37.734541,23.948689 37.734820,23.948809 37.734747,23.949134 37.734540)),((23.948536 37.734531,23.948449 37.734447,23.948414 37.734470,23.948472 37.734526,23.948420 37.734560,23.948449 37.734588,23.948536 37.734531) ))
和没有外环的简单多边形....
我想:查询mysql解析数据,将它们传递给js并将它们绘制到Google Maps.对此有何帮助？
ast*_*ame 10
对我来说这听起来真的归结为正则表达式问题,因为你根本不知道如何正确地从这些字符串中拉出所有坐标集,对吗？正则表达式是你的朋友,做一些谷歌搜索他们理解,因为我只会在这里展示.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Some Title</title>
</head>
<body>
<div id="map_canvas" style="width:800px; height:600px;">
</div>
<?php
$polyString1 = 'POLYGON((23.953261 37.733372,23.953623 37.733202,23.953572 37.733132,23.954075 37.732896,23.954126 37.732966,23.954550 37.732767,23.954566 37.732698,23.954467 37.732603,23.954258 37.732476,23.953007 37.733041,23.953207 37.733303,23.953261 37.733372),(23.953695 37.732771,23.954243 37.732524,23.954427 37.732635,23.954496 37.732702,23.954484 37.732757,23.954133 37.732921,23.954087 37.732859,23.953525 37.733122,23.953577 37.733192,23.953292 37.733326,23.953080 37.733050,23.953695 37.732771))';
$polyString2 = 'MULTIPOLYGON(((23.949134 37.734540,23.948811 37.734215,23.948775 37.734238,23.949077 37.734541,23.948689 37.734820,23.948809 37.734747,23.949134 37.734540)),((23.948536 37.734531,23.948449 37.734447,23.948414 37.734470,23.948472 37.734526,23.948420 37.734560,23.948449 37.734588,23.948536 37.734531)))';
echo '<script type="text/javascript">';
//note the quote styles below, Important!
echo "var polys=['$polyString1','$polyString2'];";
echo '</script>';
?>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
function parsePolyStrings(ps) {
var i, j, lat, lng, tmp, tmpArr,
arr = [],
//match '(' and ')' plus contents between them which contain anything other than '(' or ')'
m = ps.match(/\([^\(\)]+\)/g);
if (m !== null) {
for (i = 0; i < m.length; i++) {
//match all numeric strings
tmp = m[i].match(/-?\d+\.?\d*/g);
if (tmp !== null) {
//convert all the coordinate sets in tmp from strings to Numbers and convert to LatLng objects
for (j = 0, tmpArr = []; j < tmp.length; j+=2) {
lat = Number(tmp[j]);
lng = Number(tmp[j + 1]);
tmpArr.push(new google.maps.LatLng(lat, lng));
}
arr.push(tmpArr);
}
}
}
//array of arrays of LatLng objects, or empty array
return arr;
}
function init() {
var i, tmp,
myOptions = {
zoom: 16,
center: new google.maps.LatLng(23.9511, 37.7337),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (i = 0; i < polys.length; i++) {
tmp = parsePolyStrings(polys[i]);
if (tmp.length) {
polys[i] = new google.maps.Polygon({
paths : tmp,
strokeColor : '#FF0000',
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : '#FF0000',
fillOpacity : 0.35
});
polys[i].setMap(map);
}
}
}
init();
</script>
</body>
</html>
Art*_*hur 10
您可以使用开源库Wicket将WKT字符串直接转换为Google Maps API几何对象.这是一个演示:
http://arthur-e.github.io/Wicket/sandbox-gmaps3.html