sogou地图API用法实例教程_javascript技巧
程序员文章站
2022-05-09 12:27:31
...
本文实例讲述了sogou地图API应用,是非常实用的技巧。分享给大家供大家参考。具体实现方法如下:
地图的初始化
1、添加引用地图的API文件:
2、网站初始化加载事件:
window.onload = function () { var map = new sogou.maps.Map(document.getElementById("map_canvas"), {}); }
创建一个id为map_canvas的div,自定义div样式,网站运行时地图自动加载;
具体代码如下
指定显示莫城市地图
关键代码如下:
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); }
地图属性了解
列举一下常用的一些属性比如:地图的移动、地图类型转换、跳转到指定城市
具体代码如下
地图描点属性
地图上很重要的属性,给地图添加描点,是常用的方法属性,
搜狗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 }); }
根据上述属性做了一个小的模块,地图上动态测距代码如下:
希望本文所述对大家的sogou地图开发有所帮助
推荐阅读
-
js 调用百度地图api并在地图上进行打点添加标注_javascript技巧
-
利用谷歌地图API获取点与点的距离的js代码_javascript技巧
-
百度地图api应用标注地理位置信息(js版)_javascript技巧
-
sogou地图API用法实例教程_javascript技巧
-
使用百度地图api实现根据地址查询经纬度_javascript技巧
-
sogou地图API用法实例教程_javascript技巧
-
Google 静态地图API实现代码_javascript技巧
-
Google Maps API地图应用示例分享_javascript技巧
-
百度地图api如何使用_javascript技巧
-
Google 静态地图API实现代码_javascript技巧