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으로 문의하세요.

관련 기사

如何快速把你的 Python 代码变为 APIApr 14, 2023 pm 06:28 PM

提到API开发，你可能会想到DjangoRESTFramework，Flask，FastAPI，没错，它们完全可以用来编写API，不过，今天分享的这个框架可以让你更快把现有的函数转化为API，它就是Sanic。Sanic简介Sanic[1]，是Python3.7+Web服务器和Web框架，旨在提高性能。它允许使用Python3.5中添加的async/await语法，这可以有效避免阻塞从而达到提升响应速度的目的。Sanic致力于提供一种简单且快速，集创建和启动于一体的方法

如何进行XXL-JOB API接口未授权访问RCE漏洞复现May 12, 2023 am 09:37 AM

XXL-JOB描述XXL-JOB是一个轻量级分布式任务调度平台，其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线，开箱即用。一、漏洞详情此次漏洞核心问题是GLUE模式。XXL-JOB通过“GLUE模式”支持多语言以及脚本任务，该模式任务特点如下：●多语言支持：支持Java、Shell、Python、NodeJS、PHP、PowerShell……等类型。●WebIDE：任务以源码方式维护在调度中心，支持通过WebIDE在线开发、维护。●动态生效：用户在线通

PHP8.0中的API客户端库：GuzzleMay 14, 2023 am 08:54 AM

随着网络技术的发展，Web应用程序和API应用程序越来越普遍。为了访问这些应用程序，需要使用API客户端库。在PHP中，Guzzle是一个广受欢迎的API客户端库，它提供了许多功能，使得在PHP中访问Web服务和API变得更加容易。Guzzle库的主要目标是提供一个简单而又强大的HTTP客户端，它可以处理任何形式的HTTP请求和响应，并且支持并发请求处理。在

让机器人学会咖啡拉花，得从流体力学搞起！CMU&MIT推出流体模拟平台Apr 07, 2023 pm 04:46 PM

机器人也能干咖啡师的活了！比如让它把奶泡和咖啡搅拌均匀，效果是这样的：然后上点难度，做杯拿铁，再用搅拌棒做个图案，也是轻松拿下：这些是在已被ICLR 2023接收为Spotlight的一项研究基础上做到的，他们推出了提出流体操控新基准FluidLab以及多材料可微物理引擎FluidEngine。研究团队成员分别来自CMU、达特茅斯学院、哥伦比亚大学、MIT、MIT-IBM Watson AI Lab、马萨诸塞大学阿默斯特分校。在FluidLab的加持下，未来机器人处理更多复杂场景下的流体工作也都

Vue3 Composition API怎么优雅封装第三方组件May 11, 2023 pm 07:13 PM

前言对于第三方组件，如何在保持第三方组件原有功能（属性props、事件events、插槽slots、方法methods）的基础上，优雅地进行功能的扩展了？以ElementPlus的el-input为例：很有可能你以前是这样玩的，封装一个MyInput组件，把要使用的属性props、事件events和插槽slots、方法methods根据自己的需要再写一遍：//MyInput.vueimport{computed}from'vue'constprops=define

设计API接口时，要注意这些地方！Jan 09, 2023 am 11:10 AM

本篇文章给大家带来了关于API的相关知识，其中主要介绍了设计API需要注意哪些地方？怎么设计一个优雅的API接口，感兴趣的朋友，下面一起来看一下吧，希望对大家有帮助。

Windows 11 正在获得一项新的 API 支持的功能来解决网络问题Apr 20, 2023 pm 02:28 PM

当您的WindowsPC出现网络问题时，问题出在哪里并不总是很明显。很容易想象您的ISP有问题。然而，Windows笔记本电脑上的网络并不总是顺畅的，Windows11中的许多东西可能会突然导致Wi-Fi网络中断。随机消失的Wi-Fi网络是Windows笔记本电脑上报告最多的问题之一。网络问题的原因各不相同，也可能因Microsoft的驱动程序或Windows而发生。Windows是大多数情况下的问题，建议使用内置的网络故障排除程序。在Windows11

SpringBoot怎么实现api加密May 15, 2023 pm 11:10 PM

SpringBoot的API加密对接在项目中，为了保证数据的安全，我们常常会对传递的数据进行加密。常用的加密算法包括对称加密（AES）和非对称加密（RSA），博主选取码云上最简单的API加密项目进行下面的讲解。下面请出我们的最亮的项目rsa-encrypt-body-spring-boot项目介绍该项目使用RSA加密方式对API接口返回的数据加密，让API数据更加安全。别人无法对提供的数据进行破解。SpringBoot接口加密，可以对返回值、参数值通过注解的方式自动加解密。什么是RSA加密首先我

See all articles