sogou地图API用法实例教程
(编辑：jimmy 日期: 2025/5/11 浏览：3 次 )
本文实例讲述了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); }地图属性了解
列举一下常用的一些属性比如:地图的移动、地图类型转换、跳转到指定城市
具体代码如下
上一篇：使用js dom和jquery分别实现简单增删改<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地图开发有所帮助
下一篇：当前流行的JavaScript代码风格指南
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。