ホームページ >バックエンド開発 >PHPチュートリアル >PHP と Amap API を使用してインタラクティブな地図マーカーを作成する
PHP と Amap API を使用してインタラクティブな地図マーカーを作成する
- 王林オリジナル
- 2023-07-31 17:06:211400ブラウズ
PHP と Amap API を使用してインタラクティブな地図マーカーを作成する
はじめに:
現代のモバイル インターネット時代において、地図サービスは人々にとって不可欠なツールの 1 つとなっています。場所を探したり、ルートを計画したり、周囲の情報を検索したりするときに、マップが役に立ちます。 Amap API は豊富な地図サービスを提供し、PHP 言語の強力な処理機能と組み合わせることで、この 2 つを使用してインタラクティブな地図マーカーを作成できます。
準備:
- AutoNavi 開発者アカウントを登録します。
- 新しい Web サービス アプリケーションを作成し、開発者キーを取得します。
コードの実装:
まず、マップと対応する対話型関数を収容するための基本的な 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>分析:
- AmapとjQueryライブラリのリソースリンクを導入することで、ページ内で関連するAPIを利用できるようになります。
- マップ オブジェクトを作成し、ズーム レベルと中心点の座標を設定します。
- ズーム ツールバーを含むマップ コントロールを追加しました。
- マップのクリック イベントをリッスンし、クリック位置の緯度と経度の座標を取得します。
- マーカー オブジェクトを作成し、マップに追加します。
- 情報フォームオブジェクトを作成し、マーカーポイントをクリックしたときに緯度経度情報を表示します。
注:
- コード内の
YOUR_KEYを独自の開発者キーに置き換えます。 - Amap API は HTTPS プロトコルを使用するため、ブラウザーのエラーを避けるために HTTPS をサポートするサーバーに Web ページを展開することをお勧めします。
概要:
この記事では、PHP 言語と Amap API を使用して、単純な対話型の地図マーキングの例を実装します。読者は、ルート計画、検索機能などの追加など、独自のニーズや地図 API のドキュメントに応じて機能をさらに拡張できます。地図サービスを使用すると、より便利な地理情報の表示とインタラクティブなエクスペリエンスをユーザーに提供できます。
以上がPHP と Amap API を使用してインタラクティブな地図マーカーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。