地理的位置情報をマークするBaidu地図APIアプリケーション（js版）

記録せずに何かをすることもあり、しばらくしてから見ると忘れてしまうこともあります。もう一度見る必要があります。

Baidu 地図 JavaScript API は http://developer.baidu.com/map/reference/ を参照できます 例: http://developer.baidu.com/map/jsdemo.htm

Baidu Maps のその他の紹介 http://www.cnblogs.com/milkmap/tag/mapAPI/ 紹介は非常に詳細です。

地理的位置情報をマークする百度地図を作成し、百度 API を通じて住所を取得しました。この地図APIはJavaScript版です

表示されている div コントロールを追加します

コードをコピーします コードは次のとおりです: 検索: type= "button" value="search" style="cursor: pointer" />

緯度: 経度: >マークポイントエリア:

=" 幅: 350px; 高さ: 340px;" id="Div1"> ;北京市 [ 都市を変更 ] 都市リスト > 🎜>

コードは次のとおりです:

//jquery ライブラリ /Baidu 地図ファイル </script&gt ; //都市選択

コードを追加

コードをコピーします コードは次のとおりです: var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(117.10, 40.13) , 11); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.OverviewMapControl()); 🎜>map.addControl(new BMap.MapTypeControl()); //Search document.getElementById("areaSearch").onclick = function () { //アドレス パーサー インスタンスを作成します var myGeo = new BMap.Geocoder(); var searchTxt = document.getElementById("txtarea").value; // 地図上に住所解決結果を表示し、地図の視野を調整します myGeo .getPoint(searchTxt, function (point) { if (point) { map.centerAndZoom(point, 16); document.getElementById("txtlatitude").value = point.lat; document.getElementById("txtLongitude").value = point.lng; var pointMarker = new BMap.Point(point.lng, point.lat); geocodeSearch(pointMarker); 🎜> map.addOverlay(new BMap.Marker(point)); } else alert("結果が見つかりません"); } map.enableScrollWheelZoom(); // CityList オブジェクトを作成し、citylist_container ノードに配置します var myCl = new BMapLib.CityList({ コンテナ: "citylist_container", マップ: マップ }); >/ / 都市をクリックすると、関連する操作を追加します。 myCl.addEventListener("cityclick", function (e) { // 現在の都市の表示を変更します。 document.getElementById("curCity")。 innerHTML = e. name; document.getElementById("cityList").style.display = "none">}); を追加します。 「都市の変更」リンク クリック操作 document.getElementById("curCityText").onclick = function () { var cl = document.getElementById("cityList") if (cl.style.display); == "なし" ) { cl.style.display = ""; } else { cl.style.display = "なし" }; // 都市リストを与える 閉じるボタンのクリック操作を追加します document.getElementById("popup_close").onclick = function () { var cl = document.getElementById("cityList"); (cl.style.display == "none") { cl.style.display = ""; } else { cl.style.display = "none"; >};

map.addEventListener("click", function (e) { document.getElementById("txtlatitude").value = e.point.lat; document.getElementById(" txtLongitude").value = e.point.lng; map.clearOverlays(); var pointMarker = new BMap.Point(e.point.lng, e.point.lat); // 座標を作成しますラベルの addMarker(pointMarker);

レンダリング

このアノテーションのソース コード: Baidu マップ アノテーション ソース コード

地理的位置情報をマークするBaidu地図APIアプリケーション（js版）_javascriptスキル