JS と Amap を使用して位置ズームとドラッグ機能を実装する方法

ステップ 3: マップ オブジェクトを初期化する
JS ファイルで、マップ オブジェクトを初期化し、マップ コンテナーに関連付ける必要があります。コードは次のとおりです:

var map = new AMap.Map('mapContainer');

By new AMap.Map('mapContainer') を呼び出すと、マップ オブジェクトを作成し、マップ コンテナーの ID を渡すことができます。

ステップ 4: マップの中心点とズーム レベルを設定する
マップ オブジェクトを初期化した後、setZoom() メソッドと setCenter() メソッドを使用できます。地図の中心点とズーム レベルを設定するためのコードは次のとおりです:

map.setZoom(14); // 设置缩放级别为14
map.setCenter([经度, 纬度]); // 设置地图中心点的坐标

setZoom() メソッドを呼び出すことで、地図のズーム レベルを設定できます。値が大きいほど、地図がズームされます。 setCenter() メソッドを呼び出すことで、地図の中心点の座標を設定できます。パラメータは配列を受け取ります。配列の最初の要素は経度、2 番目の要素は緯度です。

ステップ 5: マップのズームおよびドラッグ機能を有効にする
マップ オブジェクトが初期化されると、マップのズームおよびドラッグ機能がデフォルトで有効になります。ただし、ズームおよびドラッグ コントローラーを表示したい場合は、マップ オブジェクトの初期化時に対応するパラメーターを渡すことができます。コードは次のとおりです。

にすると、地図のズーム機能を有効にすることができます。 dragEnable パラメータを true に設定すると、マップのドラッグ アンド ドロップ機能を有効にすることができます。 コード例:

var map = new AMap.Map('mapContainer', {
  zoomEnable: true, // 启用地图缩放功能
  dragEnable: true // 启用地图拖拽功能
});