搜狗地图 JavaScript API开发示例

所有的实例是基于搜狗地图 JavaScript API 设计的。仅供快速参考。

基础实例

• Hello World
• 动态异步加载API
• 加载指定城市区域的地图
• 三维地图
• 充满全屏的地图示例 - css控制地图大小自动充满整个窗口
• 高清地图示例 - 在移动设备特别是ios设备上让地图更清晰
• 加载卫星地图、点击标记可弹出信息窗示例
• Map对象方法、属性、事件 示例
• 点击地图获取点击位置的地理坐标示例
• 标准经纬度 无需转换，调用API方法直接可用。
• 标准经纬度转换为Sogou地图坐标、计算指定半径内的范围、计算两点之间的距离
• 获取坐标投影对象，像素坐标与地理坐标互转，以及将自定义的覆盖物添加到地图。
• 判断信息点是否在指定范围内，并区别标记出来。
• 设置地图使其与指定范围相符(fitBounds)示例

事件

• 简单事件示例
• 事件以及事件侦听器中变量的获取示例
• 事件以及事件回传的参数示例
• 给DOM加事件侦听器示例
• 事件侦听处理、添加标记、信息窗示例

控制条

• 简单的控制条示例 - 系统默认地图缩放、卫星控件
• 控制条样式类型示例 - 提供了5种样式，控件可以是完整的，也可以是迷你的。
• 控制条样式类型示例 - 迷你小地图（搜狗logo自动变小）。
• 设置漫游方向箭头中间的还原按钮点击后的地图状态。
• 自定义控制条示例
• 自定义控件和设置地图状态示例

覆盖层

• 简单添加标记示例
• 简单删除标记示例
• 删除多个标记示例
• 删除所有覆盖物示例
• Marker类所有方法、属性、事件示例
• 标记指定系统样式示例
• 标记可拖拽以及获取拖拽结束时的坐标示例
• 绘制标记（点对象） - 简单自定义图标示例
• 绘制标记（点对象） - 简单自定义图标示例
• 设置marker鼠标悬停时图标示例
• 改变marker前景图标和鼠标悬停时图标示例
• 简单画圆形示例
• 简单画矩形示例
• 简单画折线示例
• 进阶画折线示例
• 复杂画折线示例 - 测距功能示例
• 画折线设置默认样式、鼠标悬停样式以及样式切换示例 - 鼠标悬停高亮
• 简单的绘制多边形面示例
• 画多边形区域、获取多边形的节点数组，点击位置坐标示例
• 画多边形区域、边自动闭合示例
• 简单信息窗示例
• 简单信息窗示例 设置最大宽度
• 点击地图打开信息窗示例
• 信息窗示例 在不同标记上打开信息窗显示不同内容
• 简单Label示例
• 公交，搜索，自驾工具面板示例
• 简单Brand示例，在地图上某个位置插一个牌子，可自定义牌子样式。

地图服务

搜索

• 当前视野内搜索
• 周边查询-指定中心点，半径
• 周边查询-指定id，半径
• 范围查询-指定分类id，关键字
• 范围查询-指定分类id 或uid ,dataid
• 搜索结果面板
• 标记事件-打开信息窗
• 在地图上清除搜索结果

公交

• 公交搜索-指定起终点
• 公交搜索-搜索参数设置
• 公交搜索-公交结果面板
• 公交搜索-在地图上删除当前显示的方案
• 公交搜索-在地图上删除当前显示的详细乘车方案
• 公交搜索-显示其中一条公交详细方案的结果面板
• 公交搜索-获取其中一条公交详细方案的距离与时间
• 公交搜索-动态选取起点和终点，提交公交方案查询
• 公交搜索-起终点为地址信息

自驾

• 自驾搜索-指定起终点
• 自驾搜索-指定结果面板
• 自驾搜索-获取距离与时间
• 自驾搜索-拖拽起终点查询
• 自驾搜索-删除线路
• 自驾搜索-跨省
• 自驾搜索-起终点为地址信息

地理编码

• 地址解析
• 地址解析--指定地址信息
• 反地址解析
• 反地址解析--指定地址信息

将坐标转换成搜狗坐标

• 将不同坐标转换成搜狗坐标
• 批量转换成搜狗坐标

扩展类

定位测速

• 简单的定位示例