この記事では、非常に実用的な手法であるSogou Map APIの適用について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
マップの初期化
1.マップを参照するAPIファイルを追加します。
<スクリプトsrc = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" type = "text/javascript"> </script>
2。ウェブサイトの初期化の読み込みイベント：
window.onload = function（）{var map = new sogou.maps.map（document.getElementbyId（ "map_canvas"）、{}）;}ID MAP_CANVAS、カスタムDIVスタイルでDIVを作成すると、Webサイトが実行されたときにマップが自動的にロードされます。
特定のコードは次のとおりです
<html xmlns = "http://www.w3.org/1999/xhtml"> <head runat = "server"> <title> </title> <style type = "text/css"> html {height：auto;} body {height：height：0; magragin：0; magrain：0; padding：0; auto; 500px; position：absolute;}@media print {#map_canvas {height：950px;} </style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" type = "text/javascript"> </script "> </script> < sogou.maps.map（document.getElementbyId（ "Map_canvas"）、{}）;} </script> </head> <body> <form id = "form1" runat = "server"> <div id = "map_canvas"> </div> </form> </body> </html>Mochengマップの表示を指定します
重要なコードは次のとおりです。
window.onload = function（）{var myoptions = {zoom：10、center：new sogou.maps.point（12956000、4824875）}; // city coordinates、この座標は北京座標var = new sogou.maps.map（document.getelement.map（document.getelementbyid（map_canvas "）;"）; }マッププロパティの理解
マップの動き、マップタイプ変換、指定された都市へのジャンプなど、一般的に使用されるプロパティをリストします
特定のコードは次のとおりです
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <title> </title> <style type = "> html {height：height：auto;} {width：1000px; height：500px; position：absolute;}@media print {#map_canvas {height：950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.52.52.52.52.52. map; //グローバル変数window.onload = function（）{var myoptions = {zoom：10、center：new sogou.maps.point（12956000、4824875）}; // city map = new sogou.maps.map（document.getelementbyid（ "map_canvas"）、myoptions "）; myoptions"）; myoptions "）;関数setMaptypeid（num）{//：//sogou.maps.maptypeid.roadmap normal map // sogou.maptypeid.satellite衛星マップなど、マップタイプを設定します。 map // map.setmaptypeid（sogou.maps.maptypeid.hybrid）switch（num）{case 1：map.setmaptypeid（sogou.maps.maptypeid.roadmap）;壊す; //通常のマップケース2：map.setmaptypeid（sogou.maps.maptypeid.satellite）;壊す; //衛星マップケース3：map.setmaptypeid（sogou.maps.maptypeid.hybrid）;壊す; //衛星と道路ネットワークの混合マップ}} //パンビー方法マップマップは手動で関数パンビーを移動する（a、b）{map.panby（a、b）} // setoptionsメソッドの例指定された領域関数setoptions（）{//マップセンター、レベル、およびタイプMap.setoptions（{center：new sogou.maps（1352000）を設定します。 12、maptypeid：sogou.maps.maptypeid.roadmap}）} // setcenterメソッドの例は、指定された領域aとbがマップレベルの座標であり、cはマップレベル機能セットセンター（a、b、c）{map.setcenter（bew sogou.maps.point（a、b）、c）} night night nights fit fit fits gums {//禁じられた都市の近くに範囲を設定しますvar bounds = new sogou.maps.bounds（12955101、4824738、12958355、4827449）; //すべての範囲を表示するようにマップを設定しますonclick = "setMaptypeid（2）" type = "button"/> <input値= "衛星と道路ネットワークの混合マップ" onclick = "setMapTypeid（3）" type = "ボタン"/> <入力値= "左" onclick = "panby（200,0）" type = "" type = "/> <" inclick "pan =" panby "pan" pan "pan" pan "pan" pan = "pan =" pan = "pan =" pan = "pan =" Pani <入力値= "Move up" onclick = "panby（0,200）" type = "button"/> <input value = "onclick =" panby（0、-200） "type ="ボタン "/> <入力値=" "onclick =" panby（0、-200） "type =" "type =" "set =" "onclickion <入力値= "Tianjin" onclick = "setcenter（13046000,4714250,10）" type = "button"/> <input value = "lodiden city" onclick = "fitbounds（）" button "/> <div id =" map_canvas "> </div>マップストロークプロパティ
それは地図上の非常に重要な属性です。マップにトレースポイントを追加することは、一般的なメソッド属性です。
Sogou APIは、ストロークを埋めるために2種類のストロークを提供します。デフォルトのストロークと動的追加ストローク。
デフォルトのストロークが追加されます：
var location = new sogou.maps.point（12956000、4824875）; //ポイントスラッシュ位置を指定しますvar map = new sogou.maps.map（document.getElementById（ "Map_canvas"）、{}）; //マップの初期化var marker = new sogou.maps.marker（{position：location、// draw coordinate title： "draw point"、// draw name label：{visible：true、align： "bottond"}、// draw point display form map：map、}）; // addrawポイント動的なストロークの追加
window.onload = function () { //Initialize map map = new sogou.maps.Map(document.getElementById("map_canvas"), {});//Add click event for the map sogou.maps.event.addListener(map, 'click', function (event) { var marker1 = new sogou.maps.Marker({ position: event.point, map: map }）; }2つのストロークポイントに基づく範囲測定
//クラス関数の唯一の例を取得getInstance（a）{a.hasownproperty（ "_ instance"）|| （a._instance = new a）; return a._instance} // 2つのポイントは接続された関数ライン（mylatlng、mypoint）{var converter = getInstance（sogou.maps.converter）; var distance = converter.distance（mylatlng、mypoint）; // 2ポイントリンクvar line = new Sogou.maps.polyline（{path：[mylatlng、mypoint]、strokecolor： "＃ff0000"、strokeopacity：1.0、strokeweight：1、title：parseint（distant） + "meter"、map：map}）; }上記のプロパティに基づいて小さなモジュールが作成されており、マップ上の動的範囲のコードは次のとおりです。
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <title> </title> <style type = "> html {height：height：auto;} {width：1000px; height：500px; position：absolute;}@media print {#map_canvas {height：950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.52.52.52.52.52.マップ; var num; varリスナー; //クラス関数の唯一の例を取得getInstance（a）{a.hasownproperty（ "_ instance"）|| （a._instance = new a）; return a._instance} window.onload = function（）{// Map Map = new sogou.maps.map（document.getElementById（ "map_canvas"）、{}）; }関数addcj（）{var mypoint; var mypoint; num = 0; //クリックイベントをマップに追加し、クリックしてクリックストロークリスナー= sogou.maps.addlistener（マップ、 'click'、function（event）{if（num == 0）{mypoint = mypoint = event.point; //クリックポジションの座標を取得します= mypoint = mypointのcoording;位置}行（MyPoint、MyPoint）; } function delcj（）{sogou.maps.event.removelistener（リスナー）} // 2つのポイントは接続された関数ライン（mylatlng、mypoint）{var converter = getInstance（sogou.maps.convertor）; var distance = converter.distance（mylatlng、mypoint）; // 2つのポイントはリンクされていますvar line = new sogou.maps.polyline（{path：[mylatlng、mypoint]、strokecolor： "＃ff0000"、strokeopacity：1.0、strokeweight：1、title：parseint（distant） + "meter"、map}）; PlaceMarker（mylatlng、parseint（距離））; } //指定された座標関数placemarker（location、jl）に基づいてトレースポイントを動的に追加し、トレースポイントを作成します{var clickedlocation = location; var marker1 = new sogou.maps.marker（{position：location、title：jl+"meter"、label：{visible：true、align： "bottom"}、map：map}）; }関数mapclear（）{num = 0; map.clearall（）; } < /script> < /head> <body> <form id = "form1" runat = "server"> <input = "button" value = "range測定" onclick = "addcj（）" /> <入力タイプ= "ボタン"値 "値"値 "onclick =" delcj（） " /> <入力タイプ=" id = "map_canvas"> </div> </form> </body> </html>この記事がみんなのソグーマップ開発に役立つことを願っています