JSとAmapを使って位置マーキング機能を実装する方法-jsチュートリアル-php.cn

JSとAmapを使って位置マーキング機能を実装する方法

PHPz

リリース： 2023-11-21 13:26:06

オリジナル

1511 人が閲覧しました

JSとAmapを使って位置マーキング機能を実装する方法

JS と Amap を使用して位置マーキング機能を実装する方法

位置マーキング機能は、Web アプリケーションの一般的な要件です。、ユーザーが表示して見つけるのに便利です。この記事では、JavaScript と Amap API を使用してこの機能を実装する方法と、具体的なコード例を紹介します。

Amap は中国の大手地図サービスプロバイダーであり、その API は豊富な地図関連機能を提供します。位置マーキング機能を実装するには、まず Amap API の JavaScript ファイルを HTML ページに導入する必要があります。サンプルコードは次のとおりです。 #script

タグ Amap API の JavaScript ファイル。

key パラメータは独自の Amap API キーに置き換える必要があります。そうしないと、map 関数が正しく動作しません。 次に、位置マーキング機能を実装するための JavaScript コードを記述する必要があります。 script.js

ファイルでは、次の手順を実行できます。

マップコンテナーを作成します。

AMap.Map()

<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>

AMap.Marker()

<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>

AMap.Marker

次のようにマーカーのアイコンスタイルを設定するメソッド:
```
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 サイトの他の関連記事を参照してください。