PHP と Amap API を使用してインタラクティブな地図マーカーを作成する
はじめに:
現代のモバイル インターネット時代において、地図サービスは人々にとって不可欠なツールの 1 つとなっています。場所を探したり、ルートを計画したり、周囲の情報を検索したりするときに、マップが役に立ちます。 Amap API は豊富な地図サービスを提供し、PHP 言語の強力な処理機能と組み合わせることで、この 2 つを使用してインタラクティブな地図マーカーを作成できます。
準備:
コードの実装:
まず、マップと対応する対話型関数を収容するための基本的な HTML ページ構造を準備する必要があります。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>交互式地图标记示例</title> <style> #map { width: 100%; height: 600px; } </style> </head> <body> <div id="map"></div> <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script> <script src="https://webapi.amap.com/ui/1.1/main.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> // 创建地图对象 var map = new AMap.Map("map", { zoom: 13, // 设置地图缩放级别 center: [116.397428, 39.90923] // 设置地图中心点坐标 }); // 添加地图控件 AMap.plugin(['AMap.ToolBar'], function() { map.addControl(new AMap.ToolBar()); }); // 点击地图事件 map.on('click', function(e) { // 获取点击的经纬度坐标 var lnglat = e.lnglat; var longitude = lnglat.getLng(); var latitude = lnglat.getLat(); // 创建 Marker 对象并添加到地图上 var marker = new AMap.Marker({ position: [longitude, latitude] }); map.add(marker); // 弹窗显示经纬度信息 var infoWindow = new AMap.InfoWindow({ content: '经度:' + longitude + '<br>纬度:' + latitude }); marker.on('click', function() { infoWindow.open(map, marker.getPosition()); }); }); </script> </body> </html>
分析:
注:
YOUR_KEY
を独自の開発者キーに置き換えます。 概要:
この記事では、PHP 言語と Amap API を使用して、単純な対話型の地図マーキングの例を実装します。読者は、ルート計画、検索機能などの追加など、独自のニーズや地図 API のドキュメントに応じて機能をさらに拡張できます。地図サービスを使用すると、より便利な地理情報の表示とインタラクティブなエクスペリエンスをユーザーに提供できます。
以上がPHP と Amap API を使用してインタラクティブな地図マーカーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。