sogou 맵 API 사용 예 tutorial_javascript 기술-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

sogou 맵 API 사용 예 tutorial_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:36 PM

api 예 지도 시간 용법

이 기사의 예에서는 매우 실용적인 기술인 sogou map API의 적용을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

지도 초기화

1. 지도를 참조하는 API 파일을 추가합니다.

<script src="http://xiazai.jb51.net/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 스타일을 맞춤설정하면 웹사이트가 실행될 때 지도가 자동으로 로드됩니다.

구체적인 코드는 다음과 같습니다

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>

<script src="http://xiazai.jb51.net/201409/other/api_v2.5.1.js" type="text/javascript"></script>
<script>
window.onload = function () {
 var map = new sogou.maps.Map(document.getElementById("map_canvas"), {});

}
</script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="map_canvas"></div>
 </form>
</body>
</html>

로그인 후 복사

모시 지도를 표시하도록 지정

키코드는 다음과 같습니다.

window.onload = function () { 
var myOptions = { zoom: 10,center: new sogou.maps.Point(12956000, 4824875) };//城市坐标，本坐标为北京坐标
var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions); 
}

로그인 후 복사

지도 속성 이해

지도 이동, 지도 유형 변환, 지정된 도시로 점프 등 일반적으로 사용되는 속성을 나열합니다.

구체적인 코드는 다음과 같습니다

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
 <style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>

<script src="http://xiazai.jb51.net/201409/other/api_v2.5.1.js" type="text/javascript"></script>
<script>
var map;//创建全局变量
window.onload = function () { 
 var myOptions = { zoom: 10, center: new sogou.maps.Point(12956000, 4824875) };//指定城市
 map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);//创建地图 

}
//setMapTypeId方法示例
function setMapTypeId(num) { 
 //设置地图类型，如：
 //sogou.maps.MapTypeId.ROADMAP 普通地图
 //sogou.maps.MapTypeId.SATELLITE 卫星地图
 //sogou.maps.MapTypeId.HYBRID 卫星和路网混合地图
 //map.setMapTypeId(sogou.maps.MapTypeId.HYBRID)
 switch (num) {
 case 1: map.setMapTypeId(sogou.maps.MapTypeId.ROADMAP); break; //普通地图
 case 2: map.setMapTypeId(sogou.maps.MapTypeId.SATELLITE); break; //卫星地图
 case 3: map.setMapTypeId(sogou.maps.MapTypeId.HYBRID); break; //卫星和路网混合地图
 }
}
//panBy方法示例地图手动移动
function panBy(a, b) {
 map.panBy(a, b)
}
//setOptions方法示例显示指定地区
function setOptions() {
 //同时设置地图中心、级别、类型
 map.setOptions({ center: new sogou.maps.Point(13522000, 3641093), zoom: 12, mapTypeId: sogou.maps.MapTypeId.ROADMAP })
}
//setCenter方法示例 显示指定的地区 a、b为地图坐标，C为地图级别
function setCenter(a, b, c) {
 map.setCenter(new sogou.maps.Point(a, b), c)
}
//fitBounds方法示例 跳转到指定的范围内
function fitBounds() {
 //设置一个故宫附近的范围
 var bounds = new sogou.maps.Bounds(12955101, 4824738, 12958355, 4827449);
 //将地图设置为可全部显示这个范围
 //注：不是设置bounds为这个值，而是调整到合适的位置
 map.fitBounds(bounds)
}
</script>
</head>
<body>
 <form id="form1" runat="server">
 <input value="普通地图" onclick="setMapTypeId(1)" type="button"/>
 <input value="卫星地图" onclick="setMapTypeId(2)" type="button"/>
 <input value="卫星和路网混合地图" onclick="setMapTypeId(3)" type="button"/>
 <input value="向左移动" onclick="panBy(200,0)" type="button"/>
 <input value="向右移动" onclick="panBy(-200,0)" type="button"/>
 <input value="向上移动" onclick="panBy(0,200)" type="button"/>
 <input value="向下移动" onclick="panBy(0,-200)" type="button"/>
 <input value="向左上移动" onclick="panBy(200,200)" type="button"/> 
 <input value="上海" onclick="setOptions()" type="button"/>
 <input value="天津" onclick="setCenter(13046000,4714250,10)" type="button"/>
  <input value="故宫" onclick="fitBounds()" type="button"/>
 <div id="map_canvas" ></div>
 </form>
</body>
</html>

로그인 후 복사

맵 포인트 속성

지도에 매우 중요한 속성을 추가하는 것은 일반적으로 사용되는 방법 속성입니다.

Sogou API는 두 가지 형태의 추적 지점 채우기를 제공합니다: 기본 추적 지점과 동적으로 추가된 추적 지점

추가된 기본 추적 지점:

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,//描点坐标
 title: "描点",//描点名称
 label: { visible: true, align: "BOTTOM" },//描点显示形式
 map: map, 
 });//添加描点到地图

로그인 후 복사

동적 드로잉 포인트 추가

window.onload = function () { 
//初始化地图
 map = new sogou.maps.Map(document.getElementById("map_canvas"), {});
//为地图添加点击事件
sogou.maps.event.addListener(map, 'click', function (event) {
 var marker1 = new sogou.maps.Marker({
 position: event.point, 
 map: map
 });
 }); 
}

로그인 후 복사

두 개의 추적점을 기준으로 거리 측정

//获取类的唯一示例
function getInstance(a) {
 a.hasOwnProperty("_instance") || (a._instance = new a);
 return a._instance
}
//两点相连
function Lines(myLatlng, myPoint) { 
 var convertor = getInstance(sogou.maps.Convertor);
 var distance = convertor.distance(myLatlng, myPoint);
 //两点链接
 var line = new sogou.maps.Polyline({
 path: [myLatlng, myPoint],
 strokeColor: "#FF0000",
 strokeOpacity: 1.0,
 strokeWeight: 1,
 title: parseInt(distance) + "米",
 map: map
 }); 
}

로그인 후 복사

위 속성을 기반으로 지도의 동적 범위 지정을 위한 코드는 다음과 같습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
 <style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
 <script src="http://xiazai.jb51.net/201409/other/api_v2.5.1.js" type="text/javascript"></script>
 <script>
  var map;var num;var Listener;
  //获取类的唯一示例
  function getInstance(a) {
   a.hasOwnProperty("_instance") || (a._instance = new a);
   return a._instance
  }
  window.onload = function () { 
  //初始化地图
   map = new sogou.maps.Map(document.getElementById("map_canvas"), {}); 
  }
  function AddCj() {
   var mypointh; var myPoint;
   num = 0;
   //为地图添加点击事件、点击后显示当前坐标并添加点击描点
   Listener = sogou.maps.event.addListener(map, 'click', function (event) {
    if (num == 0) {
     mypointh = myPoint = event.point; //获取点击位置的坐标 
    }
    else {
     myPoint = mypointh;
     mypointh = event.point; //获取点击位置的坐标 
    }
    Lines(mypointh, myPoint);
    num++;
   });
  }
  function DelCj() {
   sogou.maps.event.removeListener(Listener)
  }

  //两点相连
  function Lines(myLatlng, myPoint) { 
   var convertor = getInstance(sogou.maps.Convertor);
   var distance = convertor.distance(myLatlng, myPoint);
   //两点链接
   var line = new sogou.maps.Polyline({
    path: [myLatlng, myPoint],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 1,
    title: parseInt(distance) + "米",
    map: map
   });
   placeMarker(myLatlng, parseInt(distance));
  }
  //动态添加描点，根据指定的坐标创建描点
  function placeMarker(location,jl) {
   var clickedLocation = location;
   var marker1 = new sogou.maps.Marker({
    position: location,
    title: jl+"米",
    label:{visible:true,align:"BOTTOM"},
    map: map
   });
  }
  function Mapclear() {
   num = 0;
   map.clearAll();
  }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <input type="button" value="测距" onclick="AddCj()" />
 <input type="button" value="取消测距" onclick="DelCj()" />
 <input type="button" value="清空" onclick="Mapclear()" /> 
 <div id="map_canvas" ></div>
 </form>
</body>
</html>

로그인 후 복사

이 글이 모두의 소고우 맵 개발에 도움이 되기를 바랍니다

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7650

Cakephp 튜토리얼

1392

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 미니 크로스 워드 답변

110

Related knowledge

Dewu 사용법 튜토리얼 Mar 21, 2024 pm 01:40 PM

Dewu APP는 현재 매우 인기 있는 브랜드 쇼핑 소프트웨어이지만 대부분의 사용자는 Dewu APP의 기능을 사용하는 방법을 모릅니다. 다음으로 편집기는 Dewuduo를 사용자에게 제공합니다. 관심 있는 사용자는 와서 살펴볼 수 있습니다! Dewu 이용방법 튜토리얼 [2024-03-20] Dewu 할부구매 이용방법 [2024-03-20] Dewu 쿠폰 받는 방법 [2024-03-20] Dewu 매뉴얼 고객센터 찾는 방법 [2024-03- 20] 듀우 픽업 코드 확인 방법 [2024-03-20] 듀우 구매처 찾기 [2024-03-20] 듀우 VIP 개설 방법 [2024-03-20] 듀우 반품, 교환 신청 방법

여름에는 꼭 무지개를 찍어보세요 Jul 21, 2024 pm 05:16 PM

여름에 비가 내린 후에는 아름답고 마법 같은 특별한 날씨 장면인 무지개를 자주 볼 수 있습니다. 이 역시 사진에서 볼 수 있는 보기 드문 장면으로, 매우 포토제닉하다. 무지개가 나타나는 데에는 몇 가지 조건이 있습니다. 첫째, 공기 중에 충분한 물방울이 있고, 둘째, 태양이 낮은 각도로 빛납니다. 따라서 비가 그친 후 오후에 무지개를 보는 것이 가장 쉽습니다. 그러나 무지개의 형성은 날씨, 빛, 기타 조건의 영향을 크게 받기 때문에 일반적으로 짧은 시간 동안만 지속되며, 가장 잘 볼 수 있고 촬영할 수 있는 시간은 더욱 짧습니다. 그러면 무지개를 만났을 때 어떻게 제대로 기록하고 고품질로 사진을 찍을 수 있습니까? 1. 무지개를 찾아보세요. 위에서 언급한 조건 외에도 무지개는 대개 햇빛 방향으로 나타납니다. 즉, 태양이 서쪽에서 동쪽으로 빛날 경우 무지개가 동쪽에서 나타날 확률이 높습니다.

WeChat에서 결제 소리를 끄는 방법에 대한 튜토리얼 Mar 26, 2024 am 08:30 AM

1. 먼저 위챗을 엽니다. 2. 오른쪽 상단의 [+]를 클릭하세요. 3. QR코드를 클릭하시면 결제가 진행됩니다. 4. 오른쪽 상단에 있는 세 개의 작은 점을 클릭하세요. 5. 결제도착 음성알림을 클릭하시면 종료됩니다.

photoshopcs5는 어떤 소프트웨어인가요? -photoshopcs5 사용법 튜토리얼 Mar 19, 2024 am 09:04 AM

PhotoshopCS는 Photoshop Creative Suite의 약자로 Adobe에서 제작한 소프트웨어입니다. 그래픽 디자인 및 이미지 처리에 널리 사용됩니다. PS를 처음 배우는 사용자로서 오늘은 photoshopcs5가 무엇인지, photoshopcs5를 사용하는 방법에 대해 설명하겠습니다. . 1. Photoshop CS5는 어떤 소프트웨어입니까? Adobe Photoshop CS5 Extended는 영화, 비디오 및 멀티미디어 분야의 전문가, 3D 및 애니메이션을 사용하는 그래픽 및 웹 디자이너, 엔지니어링 및 과학 분야의 전문가에게 이상적입니다. 3D 이미지를 렌더링하고 이를 2D 합성 이미지로 병합합니다. 쉽게 비디오 편집

전문가가 가르쳐드립니다! Huawei 휴대폰에서 긴 사진을 자르는 올바른 방법 Mar 22, 2024 pm 12:21 PM

스마트폰의 지속적인 발전과 함께 휴대폰의 기능은 점점 더 강력해졌고, 그 중 장사진 촬영 기능은 많은 사용자들이 일상생활에서 사용하는 중요한 기능 중 하나로 자리 잡았다. 긴 스크린샷은 사용자가 쉽게 보고 공유할 수 있도록 긴 웹페이지, 대화 기록, 사진을 한 번에 저장하는 데 도움이 됩니다. 많은 휴대폰 브랜드 중에서 Huawei 휴대폰은 사용자들로부터 높은 평가를 받는 브랜드 중 하나이며, 긴 사진을 자르는 기능도 높은 평가를 받고 있습니다. 이 기사에서는 Huawei 휴대폰으로 장사진을 찍는 올바른 방법과 Huawei 휴대폰을 더 잘 활용하는 데 도움이 되는 몇 가지 전문가 팁을 소개합니다.

PHP 튜토리얼: int 유형을 문자열로 변환하는 방법 Mar 27, 2024 pm 06:03 PM

PHP 튜토리얼: Int 유형을 문자열로 변환하는 방법 PHP에서는 정수 데이터를 문자열로 변환하는 것이 일반적인 작업입니다. 이 튜토리얼에서는 특정 코드 예제를 제공하면서 PHP의 내장 함수를 사용하여 int 유형을 문자열로 변환하는 방법을 소개합니다. 캐스트 사용: PHP에서는 캐스트를 사용하여 정수 데이터를 문자열로 변환할 수 있습니다. 이 방법은 매우 간단합니다. 정수 데이터 앞에 (문자열)을 추가하면 문자열로 변환됩니다. 아래는 간단한 샘플 코드입니다.

Honor 휴대폰 Hongmeng 시스템 업그레이드 튜토리얼 Mar 23, 2024 pm 12:45 PM

Honor 휴대폰은 뛰어난 성능과 안정적인 시스템으로 인해 항상 소비자들의 선호를 받아왔습니다. 최근 Honor 휴대폰은 새로운 Hongmeng 시스템을 출시하여 많은 사용자의 관심과 기대를 불러일으켰습니다. 홍멍(Hongmeng) 시스템은 '세계를 통합하는' 시스템으로 알려져 있으며, 더욱 원활한 작동 경험과 높은 보안성을 갖추고 있어 사용자가 스마트폰의 새로운 세계를 경험할 수 있습니다. 많은 사용자들이 Honor 휴대폰 시스템을 Hongmeng 시스템으로 업그레이드하고 싶다고 표현했습니다. 이제 Honor 휴대폰의 Hongmeng 시스템 업그레이드 튜토리얼을 살펴보겠습니다. 첫째로, 나는

전자 영어 글자를 반각 글자로 변환하는 간단한 튜토리얼 Mar 25, 2024 pm 09:21 PM

컴퓨터를 사용하여 영어를 입력할 때, 가끔 전각 영문자와 반각 영문자의 차이가 발생하는 경우가 있습니다. 전각 영문자는 입력방법이 중국어 모드일 때 Shift 키와 영문자 키 조합을 눌러 입력한 문자를 말합니다. 반각 영문자는 입력방법이 영문모드일 때 직접 입력한 문자를 말하며, 문자폭의 반을 차지한다. 어떤 경우에는 영어 전각 문자를 반각 문자로 변환해야 할 수도 있습니다. 다음은 간단한 튜토리얼입니다. 먼저 텍스트 편집기나 다른 편집기를 엽니다.

See all articles

sogou 맵 API 사용 예 tutorial_javascript 기술

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제