本文实例讲述了sogou地图API应用,是非常实用的技巧。分享给大家供大家参考。具体实现方法如下:

地图的初始化

1、添加引用地图的API文件:

<script src="/UploadFiles/2021-04-02/api_v2.5.1.js">

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="/UploadFiles/2021-04-02/api_v2.5.1.js">

指定显示莫城市地图

关键代码如下:

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="/UploadFiles/2021-04-02/api_v2.5.1.js">

地图描点属性

地图上很重要的属性,给地图添加描点,是常用的方法属性,

搜狗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="/UploadFiles/2021-04-02/api_v2.5.1.js">

希望本文所述对大家的sogou地图开发有所帮助

标签:
sogou地图,API,用法,实例,教程

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“sogou地图API用法实例教程”

暂无“sogou地图API用法实例教程”评论...