Baidu Maps を使用してマップ グリッドを実装する例を共有する
最近、Baidu Map を使用して不動産視覚化の機能を実現したいと考えています。そのため、最も基本的な機能は、さまざまな地域の不動産の分割を実現するために地図をグリッド化することです。この記事では主に、Baidu Map を使用して次のことを行う例を紹介します。多くの機能を備えたマップグリッドを実現します。良い参考値です。皆様のお役に立てれば幸いです。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
1. Baidu Maps のオープン プラットフォームにアクセスして、秘密キーを申請します。ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4
2. 以下に自分のページを作成します。弊社の名前である ziroom-map.js を紹介する
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4"></script>
<script type="text/javascript" src="ziroom-map.js"></script>
</head>
<body>
<p id="container"></p>
<script>
var myMap = new ZMap("container"); </script>
</body>
</html>3 は、Baidu の JS API をカプセル化したものです。カプセル化されている理由を知りたい場合は、直接問い合わせてください。それを使うには？私の答えは次のとおりです。カプセル化により、特定のビジネスとマップを組み合わせてコードを明確にし、現在のマップの状態を保持できるため、マップの操作に有益です。
var ZMap = function (id, center, level) {
this.initCenter = new ZPoint(116.404, 39.915);//初始化的中心点，同时为了定义网格的中心点
this.id = id;//p的id
this.level = level ? level : 13;//地图级别
this.center = center ? center : this.initCenter;//中心点
this.map = null;//百度地图实例
this.xgrids = [];//经线
this.ygrids = [];//纬线
this.beSelectBounds = {};
this.bounds = null;//当前地图的四个顶点
this.span = null;//当前网格的跨度
this.init();
}
ZMap.prototype = {
init: function () {//全局初始化
var zMap = this;
this.map = new BMap.Map(this.id);
this.map.centerAndZoom(this.center.point, this.level);
this.map.enableScrollWheelZoom();
this.map.disableInertialDragging();
this.map.addControl(new BMap.NavigationControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
type: BMAP_NAVIGATION_CONTROL_ZOOM
})); //缩放按钮
this.map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(80, 25)})); //比例尺
this.map.disableDoubleClickZoom();
this.map.setMapStyle({style: 'googlelite'});
this.initProperty();
this.initGrid();
//添加移动后的点击事件
this.map.addEventListener("dragend", function () {
zMap.initProperty();
zMap.initGrid();
});
//添加放大或缩小时的事件
this.map.addEventListener("zoomend", function () {
zMap.initProperty();
zMap.initGrid();
});
//设置点击事件
this.map.addEventListener("click", function (e) {
var point = e.point;
//获取当前点是在哪个区块内,获取正方形的四个顶点
var points = zMap.getGrid(point);
//判断当前区域是否已经被选中过，如果被选中过则取消选中
var key = '' + points[0].lng + points[0].lat + points[2].lng + points[2].lat;//使用两个点的坐标作为key
if (zMap.beSelectBounds[key]) {
zMap.map.removeOverlay(zMap.beSelectBounds[key]);
delete zMap.beSelectBounds[key];
return;
}
var polygon = new BMap.Polygon(points, {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5});
zMap.map.addOverlay(polygon);
zMap.beSelectBounds[key] = polygon;
});
},
initProperty: function () {//初始化当前地图的状态
this.level = this.map.getZoom();
this.bounds = {
x1: this.map.getBounds().getSouthWest().lng,
y1: this.map.getBounds().getSouthWest().lat,
x2: this.map.getBounds().getNorthEast().lng,
y2: this.map.getBounds().getNorthEast().lat
};
this.span = this.getSpan();//需要使用level属性
},
initGrid: function () {//初始化网格
var zMap = this;
//将原来的网格线先去掉
for (var i in zMap.xgrids) {
this.map.removeOverlay(zMap.xgrids[i]);
}
zMap.xgrids = [];
for (var i in zMap.ygrids) {
this.map.removeOverlay(zMap.ygrids[i]);
}
zMap.ygrids = [];
//获取当前网格跨度
var span = zMap.span;
//初始化地图上的网格
for (var i = zMap.bounds.x1 + (zMap.initCenter.point.lng - zMap.bounds.x1) % span.x - span.x; i < zMap.bounds.x2 + span.x; i += span.x) {
var polyline = new BMap.Polyline([
new BMap.Point(i.toFixed(6), zMap.bounds.y1),
new BMap.Point(i.toFixed(6), zMap.bounds.y2)
], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
zMap.xgrids.push(polyline);
zMap.map.addOverlay(polyline);
}
for (var i = zMap.bounds.y1 + (zMap.initCenter.point.lat - zMap.bounds.y1) % span.y - span.y; i < zMap.bounds.y2 + span.y; i += span.y) {
var polyline = new BMap.Polyline([
new BMap.Point(zMap.bounds.x1, i.toFixed(6)),
new BMap.Point(zMap.bounds.x2, i.toFixed(6))
], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
zMap.ygrids.push(polyline);
zMap.map.addOverlay(polyline);
}
},
getSpan: function () {//获取网格的跨度
var scale = 0.75;
var x = 0.00064;
for (var i = this.level; i < 19; i++) {
x *= 2;
}
var y = parseFloat((scale * x).toFixed(5));
return {x: x, y: y};
},
getGrid: function (point) {//返回当前点在所在区块的四个顶点
var zMap = this;
//先找出两条纵线坐标
var xpoints = this.xgrids.map(function (polyline) {
return polyline.getPath()[0].lng;
}).filter(function (lng) {
return Math.abs(lng - point.lng) <= zMap.span.x;
}).sort(function (a, b) {
return a - b;
}).slice(0, 2);
//再找出两条横线的坐标
var ypoints = this.ygrids.map(function (polyline) {
return polyline.getPath()[0].lat;
}).filter(function (lat) {
return Math.abs(lat - point.lat) <= zMap.span.y;
}).sort(function (a, b) {
return a - b;
}).slice(0, 2);
return [
new BMap.Point(xpoints[0], ypoints[0]),
new BMap.Point(xpoints[0], ypoints[1]),
new BMap.Point(xpoints[1], ypoints[1]),
new BMap.Point(xpoints[1], ypoints[0])
];
},
reset: function () {//重置
this.map.reset();
}
}
var ZPoint = function (x, y, code) {
this.code = code;
this.point = new BMap.Point(x, y);
}関連する推奨事項:
以上がBaidu Maps を使用してマップ グリッドを実装する例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1660
14
1416
52
1310
25
1259
29
1233
24
GoogleマップをiPhoneのデフォルト地図にする方法
Apr 17, 2024 pm 07:34 PM
iPhone のデフォルトの地図は、Apple 独自の地理位置情報プロバイダーである Maps です。マップは改善されていますが、米国外ではうまく機能しません。 Googleマップと比べて何も提供するものはありません。この記事では、Google マップを iPhone のデフォルトの地図として使用するための実行可能な手順について説明します。 Google マップを iPhone のデフォルトの地図にする方法 Google マップを携帯電話のデフォルトの地図アプリとして設定するのは、思っているよりも簡単です。以下の手順に従ってください – 前提条件 – 携帯電話に Gmail がインストールされている必要があります。ステップ 1 – AppStore を開きます。ステップ 2 – 「Gmail」を検索します。ステップ 3 – Gmail アプリの横にある をクリックします
2か月後、人型ロボットWalker Sが服をたたむことができるようになった
Apr 03, 2024 am 08:01 AM
Machine Power Report 編集者: Wu Xin 国内版の人型ロボット + 大型模型チームは、衣服を折りたたむなどの複雑で柔軟な素材の操作タスクを初めて完了しました。 OpenAIのマルチモーダル大規模モデルを統合したFigure01の公開により、国内同業者の関連動向が注目を集めている。つい昨日、中国の「ヒューマノイドロボットのナンバーワン株」であるUBTECHは、Baidu Wenxinの大型モデルと深く統合されたヒューマノイドロボットWalkerSの最初のデモを公開し、いくつかの興味深い新機能を示した。 Baidu Wenxin の大規模モデル機能の恩恵を受けた WalkerS は次のようになります。 Figure01 と同様に、WalkerS は動き回るのではなく、机の後ろに立って一連のタスクを完了します。人間の命令に従って服をたたむことができる
Baidu Apollo、L4自動運転に対応した世界初の大型モデル「Apollo ADFM」を発売
Jun 04, 2024 pm 08:01 PM
5月15日、Baidu Apolloは武漢Baidu キャロット Auto Robot Zhixing Valleyで2024年アポロデーを開催し、過去10年間におけるBaiduの自動運転における大きな進歩を包括的に実証し、大型モデルと乗客の安全性の新たな定義に基づいた技術的飛躍をもたらした。世界最大の自動運転ネットワークである百度は、自動運転を人間の運転よりも安全なものにしました。このおかげで、より安全、より快適、環境に優しい、低炭素の旅行方法が理想から現実へと変わりつつあります。百度グループ副社長兼インテリジェント・ドライビング・ビジネス・グループ社長の王雲鵬氏はその場で「自動運転車を開発するという私たちの本来の目的は、より良い旅行への人々の高まる切望を満たすことだ。人々の満足こそが私たちの原動力である。なぜなら安全性、とても美しいので、見ることができて嬉しいです
小紅樹地図に店舗の住所を追加するにはどうすればよいですか?店舗の住所設定はどのように記入すればよいですか？
Mar 29, 2024 am 09:41 AM
小紅書が若者の間で人気が高まるにつれて、小紅書に店舗を開くことを選択する人が増えています。多くの初心者販売者は、店舗の住所を設定するときに困難に直面し、地図に店舗の住所を追加する方法がわかりません。 1. 小紅樹の地図に店舗の住所を追加するにはどうすればよいですか? 1. まず、あなたのストアが小紅書に登録されたアカウントを持っており、ストアが正常にオープンしていることを確認してください。 2. Xiaohonshu アカウントにログインし、ストア バックエンドに入り、[ストア設定] オプションを見つけます。 3. ストア設定ページで、[ストアアドレス] 列を見つけて、[アドレスを追加] をクリックします。 4. 表示される住所追加ページで、都道府県、市、区、郡、番地、番地などの店舗の詳細な住所情報を入力します。 5. 入力後、「追加を確認」ボタンをクリックします。小紅書が住所をお知らせします
Huawei携帯電話にWeChatクローン機能を実装する方法
Mar 24, 2024 pm 06:03 PM
Huawei 携帯電話に WeChat クローン機能を実装する方法 ソーシャル ソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認する まず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。
百度のロビン・リー氏は石油・ガス業界のインテリジェンスについて話し合うためにチームを率いてペトロチャイナを訪問した
May 07, 2024 pm 06:13 PM
5月7日の当サイトのニュースによると、5月6日、百度の創業者兼会長兼最高経営責任者（CEO）のロビン・リー氏がチームを率いて北京の中国石油天然気集団公司（以下、ペトロチャイナ）を訪問し、同社の取締役らと会談した。中国石油総公司の董事長と戴侯良党書記が会談した。両者は協力を強化し、エネルギー産業とデジタルインテリジェンスの深い統合を促進することについて綿密な意見交換を行った。ペトロチャイナはデジタル中国石油総公司の構築を加速し、百度グループとの協力を強化し、エネルギー産業とデジタルインテリジェンスの徹底的な統合を促進し、国家エネルギー安全保障の確保にさらに貢献する。ロビン・リー氏は、大型モデルによって示される「インテリジェントな創発」と理解、生成、論理、記憶といった中核的な機能によって、最先端技術と石油・ガス事業の組み合わせに対する想像力のより広い空間が開かれたと述べた。いつも
Google マップで一目でわかるルートを使用する方法
Jun 13, 2024 pm 09:40 PM
サービス開始から 1 年後、Google マップは新しい機能をリリースしました。地図上に目的地までのルートを設定すると、移動ルートがまとめられます。旅行が始まると、携帯電話のロック画面からルート案内を「参照」できます。 Google マップを使用すると、到着予定時刻とルートを確認できます。旅行中は、ロック画面でナビゲーション情報を表示できます。また、携帯電話のロックを解除すると、Google マップにアクセスせずにナビゲーション情報を表示できます。携帯電話のロックを解除すると、Google マップにアクセスせずにナビゲーション情報を表示できます。携帯電話のロックを解除すると、Google マップにアクセスせずにナビゲーション情報を表示できます。 携帯電話のロックを解除すると、Google マップにアクセスせずにナビゲーション情報を表示できます。 Google マップにアクセスせずにナビゲーション情報を表示できます。
Deepseek Webバージョンの入り口Deepseek公式ウェブサイトの入り口
Feb 19, 2025 pm 04:54 PM
DeepSeekは、Webバージョンと公式Webサイトの2つのアクセス方法を提供する強力なインテリジェント検索および分析ツールです。 Webバージョンは便利で効率的であり、公式ウェブサイトは包括的な製品情報、ダウンロードリソース、サポートサービスを提供できます。個人であろうと企業ユーザーであろうと、DeepSeekを通じて大規模なデータを簡単に取得および分析して、仕事の効率を向上させ、意思決定を支援し、イノベーションを促進することができます。
