sogou map API usage example tutorial_javascript skills
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
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1392
52
Tutorial on how to use Dewu
Mar 21, 2024 pm 01:40 PM
Dewu APP is currently a very popular brand shopping software, but most users do not know how to use the functions in Dewu APP. The most detailed usage tutorial guide is compiled below. Next is the Dewuduo that the editor brings to users. A summary of function usage tutorials. Interested users can come and take a look! Tutorial on how to use Dewu [2024-03-20] How to use Dewu installment purchase [2024-03-20] How to obtain Dewu coupons [2024-03-20] How to find Dewu manual customer service [2024-03-20] How to check the pickup code of Dewu [2024-03-20] Where to find Dewu purchase [2024-03-20] How to open Dewu VIP [2024-03-20] How to apply for return or exchange of Dewu
In summer, you must try shooting a rainbow
Jul 21, 2024 pm 05:16 PM
After rain in summer, you can often see a beautiful and magical special weather scene - rainbow. This is also a rare scene that can be encountered in photography, and it is very photogenic. There are several conditions for a rainbow to appear: first, there are enough water droplets in the air, and second, the sun shines at a low angle. Therefore, it is easiest to see a rainbow in the afternoon after the rain has cleared up. However, the formation of a rainbow is greatly affected by weather, light and other conditions, so it generally only lasts for a short period of time, and the best viewing and shooting time is even shorter. So when you encounter a rainbow, how can you properly record it and photograph it with quality? 1. Look for rainbows. In addition to the conditions mentioned above, rainbows usually appear in the direction of sunlight, that is, if the sun shines from west to east, rainbows are more likely to appear in the east.
Tutorial on how to turn off the payment sound on WeChat
Mar 26, 2024 am 08:30 AM
1. First open WeChat. 2. Click [+] in the upper right corner. 3. Click the QR code to collect payment. 4. Click the three small dots in the upper right corner. 5. Click to close the voice reminder for payment arrival.
What software is photoshopcs5? -photoshopcs5 usage tutorial
Mar 19, 2024 am 09:04 AM
PhotoshopCS is the abbreviation of Photoshop Creative Suite. It is a software produced by Adobe and is widely used in graphic design and image processing. As a novice learning PS, let me explain to you today what software photoshopcs5 is and how to use photoshopcs5. 1. What software is photoshop cs5? Adobe Photoshop CS5 Extended is ideal for professionals in film, video and multimedia fields, graphic and web designers who use 3D and animation, and professionals in engineering and scientific fields. Render a 3D image and merge it into a 2D composite image. Edit videos easily
Experts teach you! The Correct Way to Cut Long Pictures on Huawei Mobile Phones
Mar 22, 2024 pm 12:21 PM
With the continuous development of smart phones, the functions of mobile phones have become more and more powerful, among which the function of taking long pictures has become one of the important functions used by many users in daily life. Long screenshots can help users save a long web page, conversation record or picture at one time for easy viewing and sharing. Among many mobile phone brands, Huawei mobile phones are also one of the brands highly respected by users, and their function of cropping long pictures is also highly praised. This article will introduce you to the correct method of taking long pictures on Huawei mobile phones, as well as some expert tips to help you make better use of Huawei mobile phones.
PHP Tutorial: How to convert int type to string
Mar 27, 2024 pm 06:03 PM
PHP Tutorial: How to Convert Int Type to String In PHP, converting integer data to string is a common operation. This tutorial will introduce how to use PHP's built-in functions to convert the int type to a string, while providing specific code examples. Use cast: In PHP, you can use cast to convert integer data into a string. This method is very simple. You only need to add (string) before the integer data to convert it into a string. Below is a simple sample code
Honor mobile phone Hongmeng system upgrade tutorial
Mar 23, 2024 pm 12:45 PM
Honor mobile phones have always been favored by consumers because of their excellent performance and stable system. Recently, Honor mobile phones have released a new Hongmeng system, which has attracted the attention and expectations of many users. Hongmeng system is known as the system that "unifies the world". It has a smoother operating experience and higher security, allowing users to experience a new world of smartphones. Many users have expressed that they want to upgrade their Honor mobile phone system to the Hongmeng system. So, let’s take a look at the upgrade tutorial of the Honor mobile phone’s Hongmeng system. firstly, I
A simple tutorial on converting full-width English letters to half-width letters
Mar 25, 2024 pm 09:21 PM
When using a computer to input English, sometimes we encounter the difference between full-width English letters and half-width English letters. Full-width English letters refer to the characters input by pressing the Shift key and the English letter key combination when the input method is Chinese mode. They occupy a full-width character width. Half-width English letters refer to characters input directly when the input method is English mode, and they occupy half a character width. In some cases, we may need to convert full-width English letters to half-width letters. Here is a simple tutorial: First, open a text editor or any
