マップへのWebページ

多くの場合、Baiduのマップの公式ウェブページに挿入され、これは一歩一歩、以下の手順に従って、実際には非常に簡単です。

 

1.サイトのマップを作成するためにはBaiduに行く  http://api.map.baidu.com/lbsapi/creatmap/を 

→具体的なオープン→1.都市、あなたが入力ボックスを表示することを選択した都市内の切り替えボタンの中心点を見つけて、次の図2. 3つの小さなステップ1,2,3の最初のステップを参照してください。アドレス、あなたはマップの右側に表示される場所のマップを表示することができ、[検索]をクリックします 

 

 2.設定3.開きます、幅と高さマップを設定するかどうかどのボタンを決めることができたマップは、ボタンの位置を設定することができています 

 

4.→「点マーク」最初のアイコンをマークし、あなたはドットが地図上にマークとして、あなたがポイントマーカーのスタイルを変更することができます表示された特定の場所のポイントを、設定することができ、あなたも名を設定し、表示したいコメントすることができます。最初に2つのアイコン「タグライン」、あなたはラインのルートを描くことができ、3番目のアイコン「ワードマーク」、あなたはいくつかのテキストを書くことができます。

 

 したがって、単純な百度マップロケーションが完成設定され、次のステップは、ウェブページにマッピングすることです。

5.「コードを取得」のコードは、私たちが望むものであるの内側に、「map.html」という名前の空のHTMLファイル保存、にコードをコピーし、爆弾ボックスがあるでしょう。 

 

 

6.それはあなたのWebページに独自の設定のマップを表示できるように、map.htmlを書くために、パスをSRC、当然のことながら、マップの幅と高さは、あなたがあなた自身のCSSを書きたいページに正しく表示されます。 

紙はhttps://blog.csdn.net/qq_39533140/article/details/80042315から切り替え

効果が書き出されますが、Baiduは、アイコンをマークしません示すように、：

 

解決策は、アドレス内のアイコンを見つけるために、生成されたコードと同じくらい長く、非常に簡単です：

 

//创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }

 

 http://app.baidu.com/map/images/us_mk_icon.png

替换成这个地址即可 http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png

图标 就出来了。