sogou map API usage example tutorial_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

sogou map API usage example tutorial_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:36 PM

apiExampleTutorialusage

The example in this article describes the application of sogou map API, which is a very practical technique. Share it with everyone for your reference. The specific implementation method is as follows:

Map initialization

1. Add the API file referencing the map:

<script src="http://xiazai.jb51.net/201409/other/api_v2.5.1.js" type="text/javascript"></script>

2. Website initialization loading event:

window.onload = function () { 
var map = new sogou.maps.Map(document.getElementById("map_canvas"), {});
}

Create a div with the ID map_canvas, customize the div style, and the map will be automatically loaded when the website is running;

The specific code is as follows

<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>

Specify to display Mo city map

The key code is as follows:

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); 
}

Understanding map attributes

List some commonly used attributes such as: map movement, map type conversion, jumping to a designated city

The specific code is as follows

<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>

Map point attributes

A very important attribute on the map. Adding drawing points to the map is a commonly used method attribute.

Sogou API provides two forms of filling in tracing points: default tracing points and dynamically added tracing points

Default tracing point added:

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, 
 });//添加描点到地图

Add dynamic drawing points

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
 });
 }); 
}

Measure distance based on two tracing points

//获取类的唯一示例
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
 }); 
}

I made a small module based on the above attributes. The code for dynamic ranging on the map is as follows:

<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>

I hope this article will be helpful to everyone’s sogou map development

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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