ホームページ >ウェブフロントエンド >jsチュートリアル >Baidu Maps を使用してマップ グリッドを実装する方法

Baidu Maps を使用してマップ グリッドを実装する方法

亚连
亚连オリジナル
2018-06-07 15:24:164721ブラウズ

以下に、Baidu Map を使用してマップ グリッドを実装する例を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

前書き: 最近、Baidu Map を使用して不動産視覚化の機能を実現したいと考えています。そのため、最も基本的な機能は、さまざまな地域の不動産の分割を実現するために地図をグリッド化することです。 Baidu Map のオープン プラットフォームにアクセスして秘密キーを適用します。ここで自分の秘密キーを投稿します。ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4

2、新しいシンプルなページを作成します。以下に ziroom を紹介する自分のページを投稿します

<!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。 -map.js、これは私が投稿したコードです。この js は Baidu の js API をカプセル化しています。なぜカプセル化されているのか知りたい人は、これを直接使用できますか?私の答えは次のとおりです。カプセル化により、特定のビジネスとマップを組み合わせてコードを明確にし、現在のマップの状態を保持できるため、マップの操作に有益です。

rreee

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

node.jsを使用してDouyinの自動赤い封筒取得機能を実装する

JavaScriptでデフォルトのアバターを入力する方法

大きすぎるbundle.jsファイルの問題を処理するためにwebpackを使用する

以上がBaidu Maps を使用してマップ グリッドを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。