频道导航

sogou地图API用法实例教程

2018-12-31 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了sogou地图API用法实例教程，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

地图的初始化

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

2、网站初始化加载事件：

创建一个id为map_canvas的div,自定义div样式，网站运行时地图自动加载；

具体代码如下

地图描点属性

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

搜狗API提供两种描点填写形式默认描点和动态添加描点

默认描点添加：

名称 label: { visible: true,align: "BOTTOM" },//描点显示形式 map: map,});//添加描点到地图

动态描点添加

添加点击事件 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 }); }

根据上述属性做了一个小的模块，地图上动态测距代码如下：