interface Web
js tutoriel
Exemple d'utilisation de l'API Sogou Map Compétences tutoriel_javascript
Exemple d'utilisation de l'API Sogou Map Compétences tutoriel_javascript
L'exemple de cet article décrit l'application de l'API sogou map, qui est une technique très pratique. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :
Initialisation de la carte
1. Ajoutez le fichier API référençant la carte :
<script src="http://xiazai.jb51.net/201409/other/api_v2.5.1.js" type="text/javascript"></script>
2. Événement de chargement d'initialisation du site Web :
window.onload = function () {
var map = new sogou.maps.Map(document.getElementById("map_canvas"), {});
}
Créez un div avec l'ID map_canvas, personnalisez le style div et la carte sera automatiquement chargée lorsque le site Web est en cours d'exécution
Le code spécifique est le suivant
<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>
Spécifiez pour afficher le plan de la ville de Mo
Le code clé est le suivant :
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);
}
Comprendre les attributs de la carte
Énumérez quelques attributs couramment utilisés tels que : le mouvement de la carte, la conversion du type de carte, le saut vers une ville désignée
Le code spécifique est le suivant
<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>
Attributs des points de la carte
Un attribut très important sur la carte. L'ajout de points de dessin à la carte est un attribut de méthode couramment utilisé
.L'API Sogou fournit deux formulaires de remplissage de points de traçage : le point de traçage par défaut et le point de traçage ajouté dynamiquement
Point de traçage par défaut ajouté :
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,
});//添加描点到地图
Ajout de points dynamique
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
});
});
}
Mesurer la distance en fonction de deux points de traçage
//获取类的唯一示例
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
});
}
J'ai créé un petit module basé sur les attributs ci-dessus. Le code pour la plage dynamique sur la carte est le suivant :
<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>
J'espère que cet article sera utile au développement de la carte sogou de chacun
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Tutoriel sur l'utilisation de Dewu
Mar 21, 2024 pm 01:40 PM
Dewu APP est actuellement un logiciel d'achat de marque très populaire, mais la plupart des utilisateurs ne savent pas comment utiliser les fonctions de Dewu APP. Le guide didacticiel d'utilisation le plus détaillé est compilé ci-dessous. Ensuite, l'éditeur présente Dewuduo aux utilisateurs. tutoriels. Les utilisateurs intéressés peuvent venir y jeter un oeil ! Tutoriel sur l'utilisation de Dewu [2024-03-20] Comment utiliser l'achat à tempérament Dewu [2024-03-20] Comment obtenir des coupons Dewu [2024-03-20] Comment trouver le service client manuel Dewu [2024-03- 20] Comment vérifier le code de ramassage de Dewu [2024-03-20] Où trouver l'achat de Dewu [2024-03-20] Comment ouvrir Dewu VIP [2024-03-20] Comment demander le retour ou l'échange de Dewu
En été, vous devez essayer de photographier un arc-en-ciel
Jul 21, 2024 pm 05:16 PM
Après la pluie en été, vous pouvez souvent voir une scène météorologique spéciale magnifique et magique : l'arc-en-ciel. C’est aussi une scène rare que l’on peut rencontrer en photographie, et elle est très photogénique. Il y a plusieurs conditions pour qu’un arc-en-ciel apparaisse : premièrement, il y a suffisamment de gouttelettes d’eau dans l’air, et deuxièmement, le soleil brille sous un angle plus faible. Par conséquent, il est plus facile de voir un arc-en-ciel l’après-midi, après que la pluie s’est dissipée. Cependant, la formation d'un arc-en-ciel est grandement affectée par les conditions météorologiques, la lumière et d'autres conditions, de sorte qu'il ne dure généralement que peu de temps, et la meilleure durée d'observation et de prise de vue est encore plus courte. Alors, lorsque vous rencontrez un arc-en-ciel, comment pouvez-vous l'enregistrer correctement et prendre des photos de qualité ? 1. Recherchez les arcs-en-ciel En plus des conditions mentionnées ci-dessus, les arcs-en-ciel apparaissent généralement dans la direction de la lumière du soleil, c'est-à-dire que si le soleil brille d'ouest en est, les arcs-en-ciel sont plus susceptibles d'apparaître à l'est.
Tutoriel sur la façon de désactiver le son de paiement sur WeChat
Mar 26, 2024 am 08:30 AM
1. Ouvrez d’abord WeChat. 2. Cliquez sur [+] dans le coin supérieur droit. 3. Cliquez sur le code QR pour collecter le paiement. 4. Cliquez sur les trois petits points dans le coin supérieur droit. 5. Cliquez pour fermer le rappel vocal de l'arrivée du paiement.
Quel logiciel est Photoshop5 ? -tutoriel d'utilisation de Photoshopcs5
Mar 19, 2024 am 09:04 AM
PhotoshopCS est l'abréviation de Photoshop Creative Suite. C'est un logiciel produit par Adobe et est largement utilisé dans la conception graphique et le traitement d'images. En tant que novice apprenant PS, laissez-moi vous expliquer aujourd'hui ce qu'est le logiciel photoshopcs5 et comment l'utiliser. 1. Qu'est-ce que Photoshop CS5 ? Adobe Photoshop CS5 Extended est idéal pour les professionnels des domaines du cinéma, de la vidéo et du multimédia, les graphistes et web designers qui utilisent la 3D et l'animation, ainsi que les professionnels des domaines de l'ingénierie et des sciences. Rendu une image 3D et fusionnez-la dans une image composite 2D. Modifiez facilement des vidéos
Les experts vous apprennent ! La bonne façon de couper de longues images sur les téléphones mobiles Huawei
Mar 22, 2024 pm 12:21 PM
Avec le développement continu des téléphones intelligents, les fonctions des téléphones mobiles sont devenues de plus en plus puissantes, parmi lesquelles la fonction de prise de photos longues est devenue l'une des fonctions importantes utilisées par de nombreux utilisateurs dans la vie quotidienne. De longues captures d'écran peuvent aider les utilisateurs à enregistrer une longue page Web, un enregistrement de conversation ou une image en même temps pour une visualisation et un partage faciles. Parmi les nombreuses marques de téléphones mobiles, les téléphones mobiles Huawei sont également l'une des marques les plus respectées par les utilisateurs, et leur fonction de recadrage de longues images est également très appréciée. Cet article vous présentera la bonne méthode pour prendre de longues photos sur les téléphones mobiles Huawei, ainsi que quelques conseils d'experts pour vous aider à mieux utiliser les téléphones mobiles Huawei.
Tutoriel PHP : Comment convertir un type int en chaîne
Mar 27, 2024 pm 06:03 PM
Tutoriel PHP : Comment convertir un type Int en chaîne En PHP, la conversion de données entières en chaîne est une opération courante. Ce didacticiel expliquera comment utiliser les fonctions intégrées de PHP pour convertir le type int en chaîne, tout en fournissant des exemples de code spécifiques. Utiliser cast : En PHP, vous pouvez utiliser cast pour convertir des données entières en chaîne. Cette méthode est très simple. Il vous suffit d'ajouter (string) avant les données entières pour les convertir en chaîne. Vous trouverez ci-dessous un exemple de code simple
Honorez le didacticiel de mise à niveau du système du téléphone mobile Hongmeng
Mar 23, 2024 pm 12:45 PM
Les téléphones mobiles Honor ont toujours été favorisés par les consommateurs en raison de leurs excellentes performances et de leur système stable. Récemment, les téléphones mobiles Honor ont lancé un nouveau système Hongmeng, qui a attiré l'attention et les attentes de nombreux utilisateurs. Le système Hongmeng est connu comme le système qui « unifie le monde ». Il offre une expérience de fonctionnement plus fluide et une sécurité plus élevée, permettant aux utilisateurs de découvrir un tout nouveau monde de smartphones. De nombreux utilisateurs ont exprimé leur souhait de mettre à niveau leur système de téléphonie mobile Honor vers le système Hongmeng. Jetons donc un coup d'œil au didacticiel de mise à niveau du système Hongmeng du téléphone mobile Honor. premièrement, je
Un tutoriel simple sur la conversion de lettres anglaises pleine chasse en lettres demi-chasse
Mar 25, 2024 pm 09:21 PM
Lorsque nous utilisons un ordinateur pour saisir l’anglais, nous rencontrons parfois la différence entre les lettres anglaises pleine largeur et les lettres anglaises demi-chasse. Les lettres anglaises pleine chasse font référence aux caractères saisis en appuyant sur la touche Maj et la combinaison de touches de lettres anglaises lorsque la méthode de saisie est le mode chinois. Elles occupent une largeur de caractère pleine chasse. Les lettres anglaises demi-largeur font référence aux caractères saisis directement lorsque la méthode de saisie est le mode anglais et occupent une demi-largeur de caractère. Dans certains cas, nous devrons peut-être convertir des lettres anglaises pleine chasse en lettres demi-chasse. Voici un tutoriel simple : Tout d’abord, ouvrez un éditeur de texte ou n’importe quel autre.
