JS と Amap を使用して位置マーキング機能を実装する方法
位置マーキング機能は、Web アプリケーションの一般的な要件です。 、ユーザーが表示して見つけるのに便利です。この記事では、JavaScript と Amap API を使用してこの機能を実装する方法と、具体的なコード例を紹介します。
Amap は中国の大手地図サービス プロバイダーであり、その API は豊富な地図関連機能を提供します。位置マーキング機能を実装するには、まず Amap API の JavaScript ファイルを HTML ページに導入する必要があります。サンプルコードは次のとおりです。 #script
タグ Amap API の JavaScript ファイル。key パラメータは独自の Amap API キーに置き換える必要があります。そうしないと、map 関数が正しく動作しません。
次に、位置マーキング機能を実装するための JavaScript コードを記述する必要があります。
script.js
マップ コンテナーを作成します。
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><!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=您的高德地图API密钥"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
<script src="script.js"></script>
</body>
</html></pre><div class="contentsignin">ログイン後にコピー</div></div>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>var map = new AMap.Map('map', {
center: [116.397428, 39.90923], // 地图中心点的经纬度坐标
zoom: 13 // 地图缩放级别
});</pre><div class="contentsignin">ログイン後にコピー</div></div>
var marker = new AMap.Marker({ position: [116.397428, 39.90923], // 标记位置的经纬度坐标 title: '北京市', // 标记的名称 map: map // 标记所属的地图对象 });
上記のコードは、Amap によって提供される青色のマーカー アイコンをスタイルとして使用します。位置マーカーの。
AMap.InfoWindow
クラスを通じて情報フォームを作成し、場所に関する詳細情報を表示できます。サンプル コードは次のとおりです:marker.setIcon('https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png');
上記のコードでは、最初に情報フォームを作成し、次に位置マーカーのクリック イベントを追加します。ユーザーがマーカーをクリックすると、情報フォームがマークした位置に が表示されます。
var infoWindow = new AMap.InfoWindow({ content: '这是北京市的详细信息', // 信息窗体的内容 offset: new AMap.Pixel(0, -30) // 信息窗体相对于地点标记的偏移量 }); // 给地点标记添加点击事件,点击标记时显示信息窗体 marker.on('click', function() { infoWindow.open(map, marker.getPosition()); });
上記のコードを
script.jsファイルとして保存し、前の HTML コードと一緒に実行すると、位置マーカー付きの地図が表示されます。マークをクリックすると詳細情報を記載した情報フォームが表示されます。
実際のアプリケーションでは、特定のニーズに応じて地図の中心点、ズーム レベル、マーカーの位置とスタイル、情報フォームの内容とスタイルを調整することで、カスタマイズされた位置マーキング機能を実現できます。 . .
以上がJSとAmapを使って位置マーキング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。