한국어
한국어
<div id="map" style="width: 500px; height: 500px;"></div>
<?php
$apiKey = '당신의API열쇠';
echo <<<HTML
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak={$apiKey}"></script>
<script type="text/javascript">
// 맵 객체를 만듭니다
var map = new BMap.Map("map");
// 지도의 중심점을 베이징으로 설정하십시오
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 마우스 휠 줌을 활성화하십시오
map.enableScrollWheelZoom();
</script>
HTML;
?>
<?php
// 데이터베이스의 쿼리 위도 및 경도 정보
$markers = [
['lat' => 39.9225, 'lng'=> 116.396],
[ 'lat'=> 39.935, 'lng'=> 116.403],
[ 'lat'=> 39.927, 'lng'=> 116.415]
];
?>
<?php
echo '<script type="text/javascript"> ';;
foreach ($ 마커로 $ 마커) {
$ lat = $ 마커 [ 'lat'];
$ lng = $ 마커 [ 'lng'];
echo "var point = new bmap.point ($ lng, $ lat);";
echo "var 마커 = 새로운 bmap.marker (point);";
echo "map.addoverlay (마커);";
}
에코 '</script> ';;
?>
<script type="text/javascript">
function updateMarkers() {
// 보내다Ajax최신 주석 데이터를 얻도록 요청합니다
$.ajax({
url: 'get_markers.php',
method: 'GET',
dataType: 'json',
success: function(data) {
// 원래 마크를 지우십시오
map.clearOverlays();
// 최신 레이블이있는 데이터를 가로 지르고 있습니다，지도에 추가하십시오
for (var i = 0; i < data.length; i++) {
var point = new BMap.Point(data[i].lng, data[i].lat);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
}
});
}
<p>// 가끔씩 주석을 업데이트하는 함수를 호출하십시오.<br>
setInterval(updateMarkers, 5000);<br>
</script><br>
관련 태그:
API
