Google Maps API v3-PHP-MYSQL
-
08-07-2019 - |
質問
GOOGLE MAPS API V3は、私が使用しようとしているものです。
mysqlにはすべての座標があります。たとえば、5つのリストを取得してマップに配置する必要がありますが、表示する複数の座標とズームレベルに基づいて中心点を検索できるようにしたいと考えています。知ってる?
非常にシンプルであることがわかっているもので人生の時間を過ごしていますが、このAPIを理解することはできません。私を助けてくれる人に20ドルを支払います。
//select * from mysql limit 5
//ok great we got 5 results, great job, format the 5 results so google maps like it, [name,lat,lng] whatever.
//put them on the map and let them be clickable so i can put stuff in the infowindow thing
//make the map adjust to the proper zoom level and center point
更新
これは私が探していたもので、他の人の助けになることを願っています。
センター座標を取得するための常識的な数学の公式は[Chris B]の功績であり、swコードは最も低い緯度と経度、neコードは最も大きい緯度と経度です
sort($lat)&&sort($lon);
$r['c'] = array_sum($lat)/count($lat).', '.array_sum($lon)/count($lon);
$r['ne'] = $lat[count($lat)-1].', '.$lon[count($lon)-1];
$r['sw'] = $lat[0].', '.$lon[0];
var myOptions = {zoom:4,center: new google.maps.LatLng(<?php echo $r['c']; ?>),mapTypeId:google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
<?php foreach($x as $l) echo 'new google.maps.Marker({position:new google.maps.LatLng('.$l['lat'].','.$l['lon'].'),map:map,clickable:true});'; ?>
map.fitBounds(new google.maps.LatLngBounds(new google.maps.LatLng(<?php echo $r['sw']; ?>),new google.maps.LatLng(<?php echo $r['ne']; ?>)));
解決
平均/重み付けされた中心点が許容できる場合-すべての緯度を平均し、すべての経度を平均することができます:
$latTotal = 0;
$lngTotal = 0;
foreach ($markers as $marker) {
$latTotal += $marker['lat'];
$lngTotal += $marker['lng'];
}
$centerLat = $latTotal/count($markers);
$centerLng = $lngTotal/count($markers);
残りの部分については、Googleでいくつかの優れたV3チュートリアルがあります。
他のヒント
1〜2か月前にGoogleマップv3を使用していましたが、後でv2に切り替えました。しかし、私はあなたと同じ問題を抱えていたので、API v3のMarkerManagerクラスを作成しました。クラスの最新バージョンを見つけることができませんが、うまくいけば、機能するものを見つけました。 こちらで入手できます。
しかし、警告する必要があります-それはまったく最適化されておらず、オーバーレイを使用していません。それでいくつかの成功。
使用例:
var map = new google.maps.Map(document.getElementById('MapLayerId'), {
zoom: 7,
position: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map
});
var manager = new MarkerManager(map, {fitBounds: true});
manager.add(marker1);
manager.add(marker2);
manager.show();
V2のGDownloadUrlと同等のGOOGLE MAPS API V3のdownloadUrl
データベース(MysqlまたはSql)のすべての座標をロードする方法。
var myLatlng = new google.maps.LatLng("37.427770" ,"-122.144841");
var myOptions = {zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP,}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var url='marker.php?arg1=x&arg2=y...';
downloadUrl(url, function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = new google.maps.Marker({position: latlng, map: map});
}
});
function createXmlHttpRequest() {
try {
if (typeof ActiveXObject != 'undefined') {
return new ActiveXObject('Microsoft.XMLHTTP');
} else if (window["XMLHttpRequest"]) {
return new XMLHttpRequest();
}
} catch (e) {
changeStatus(e);
}
return null;
};
function downloadUrl(url, callback) {
var status = -1;
var request = createXmlHttpRequest();
if (!request) {
return false;
}
request.open('GET', url);
request.onreadystatechange = function() {
if (request.readyState == 4) {
try {
status = request.status;
} catch (e) {
// Usually indicates request timed out in FF.
}
if (status == 200) {
var s=request.responseText;
callback( xmlParse(s) );
}
}
}
try {
request.send(null);
}catch (e) {
changeStatus(e);
}
};
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
公式のGoogleマップPHP / Mysqlチュートリアルをチェックアウトしましたか? http://code.google.com/apis/maps/articles/phpsqlajax。 html
多角形の重心を見つけるためにこのアルゴリズムを試してください:
http://tog.acm.org/resources/GraphicsGems/gemsiv /centroid.c