标记的完整示例

此示例展示创建标记对象及标记的各种设置和方法。

获取当前改标记是否可拖拽。

获取当前标记对象的前景图标。

获取显示所在的Map对象。

获取标记所在的位置坐标。

获取标记的名称。

获取标记当前是否可见。

获取标记当前的叠加顺序。

设置标记可被拖拽。

设置标记的前景图标。

设置标记的默认前景图标和鼠标悬停时前景图标。

在指定地图上渲染标记。

设置标记的位置。

设置标记的阴影。

设置标记的名称,用于显示tip和Label。

设置标记可见/不可见。

设置标记的叠加顺序。

关键代码

	/*************************************
	 *		MarkerImage 类 示例			 *
	 *************************************/
	var image = new sogou.maps.MarkerImage('//api.go2map.com/maps/images/v2.0/flag.png',
		// 标记图标宽20像素,高32像素
		new sogou.maps.Size(20, 32),
		// 原点在图片左上角,设为(0,0)
		new sogou.maps.Point(0,0),
		// 锚点在小旗的旗杆脚上,相对图标左上角位置为(0,32)
		new sogou.maps.Point(0, 32),
		// 如果是合并的图片,必须设置此项,指定图片大小
		// 如果是一张图片一个图标,此项可缺省。
		new sogou.maps.Size(20, 32));
	var shadow = new sogou.maps.MarkerImage('//api.go2map.com/maps/images/v2.0/flag_shadow.png',
		//阴影图标宽高
		new sogou.maps.Size(37, 32),
		new sogou.maps.Point(0,0),
		new sogou.maps.Point(0, 32));
	/*************************************
	 *	MarkerShape  对象规范 示例		 *
	 *************************************/
	//shape定义点击的图标区域
	//图片即使透明也是矩形的
	//设置shape后,可以看到鼠标放在旗杆旁的右侧是不变小手的
	var shape={
		coord: [1,1,1,20,18,20,18 ,1],
		type:'poly'
	};
	/*************************************
	 *		MarkerOptions 对象规范 示例	 *
	 *************************************/
	var markerOptions={
		//设置是否在鼠标悬停时显示Label
		disableLabel:false,
		//如果为 true,则可拖动标记。默认值为 false。
		draggable:true,
		//前景的默认图标 icon和icons使用其中一个即可
		//如果同时存在,优先使用icons
		//取值类型 String|MarkerImage|MarkerStyle
		//可以是一个图片地址,也可以是MarkerImage或者MarkerStyle对象
		icon:image,
		//0 前景的默认图标,1 前景鼠标悬停时的图标
		//icons:[],
		//Marker的编号标识。
		id:"ID00001",
		//设置Label对象的参数。
		//设置成初始即可见,相对于Marker居下对齐,
		//align 取值:TOP|RIGHT|BOTTOM|LEFT ,对应标记上、右、下、左的位置。
		label:{visible:true,align:"BOTTOM"},
		//显示标记的地图。
        map: map,
		//标记位置。必填。
		position: myPoint,
		//阴影图像。shadow和shadows使用其中一个即可
		//如果同时存在,优先使用shadows
		//取值类型 String|MarkerImage|MarkerStyle
		//可以是一个图片地址,也可以是MarkerImage或者MarkerStyle对象
		shadow:shadow,
		//0 阴影默认图像,1 阴影鼠标悬停时图像。
		//shadows:[],
		//用于拖动/点击的图像地图区域定义。
		shape:shape,
		//Label文本或者鼠标悬停时显示的tip。
        title:"小旗可以拖动哦",
		//如果为 true,则显示标记。默认为true
		visible:true,
		//叠加顺序
		zIndex:0
    };
    marker = new sogou.maps.Marker(markerOptions);
	/****************************************
	 *事件 示例 (侦听要放在创建marker对象后)*
	 ****************************************/
	 //当用户停止拖动标记时会触发此事件。
	 sogou.maps.event.addListener(marker,"dragend",function(mouseEvent){
			//mouseEvent为MouseEvent对象事,会有point属性,即事件发生位置的地图坐标
			alert("拖动后位置的坐标为:"+mouseEvent.point)
	 });
	 //点击标记图标后会触发此事件。
	 sogou.maps.event.addListener(marker,"click",function(event){
			//event是浏览器的event对象
			alert("标记被点击了")
	 });
  }
	/*************************************
	 *			Marker 方法 示例    	 *
	 *************************************/
  //获取当前改标记是否可拖拽。
  function getDraggable()
  {
	alert(marker.getDraggable())
  }
  //获取当前标记对象的前景图标。
  function getIcon()
  {
	alert(marker.getIcon())
  }
  //获取显示所在的Map对象。
  function getMap()
  {
	alert(marker.getMap())
  }
  //获取显示所在的Map对象。
  function getPosition()
  {
	alert(marker.getPosition())
  }
  //获取标记的名称。
  function getTitle()
  {
	alert(marker.getTitle())
  }
  //获取标记当前是否可见。
  function getVisible()
  {
	alert(marker.getVisible())
  }
  //获取标记当前的叠加顺序。
  function getZIndex()
  {
	alert(marker.getZIndex())
  }
  //设置标记可被拖拽。
  function setDraggable()
  {
	marker.setDraggable(false)
  }
  //设置标记的前景图标。
  function setIcon()
  {
	//支持3种类型:String|MarkerImage|MarkerStyle
	marker.setIcon("//api.go2map.com/maps/images/v2.0/S20.png")
  }
  //设置标记的默认前景图标和鼠标悬停时前景图标
  //参数为数组,有2个元素,第1个表示默认前景图标,第2个表示鼠标悬停时的前景图标。
  function setIcons()
  {
	//支持3种类型:String|MarkerImage|MarkerStyle
	marker.setIcons(["//api.go2map.com/maps/images/v2.0/S20.png","//api.go2map.com/maps/images/v2.0/flag.png"])
  }
  //在指定地图上渲染标记。如果地图设置为 Null,则会删除此标记。
  function setMap()
  {
	marker.setMap(null)
  }
  //设置标记的位置,支持搜狗地图坐标和经纬度坐标。
  function setPosition()
  {
	marker.setPosition(new sogou.maps.Point(12955867,4824730))
  }
  //设置标记的阴影。
  function setShadow()
  {
	//支持3种类型:String|MarkerImage|MarkerStyle
	marker.setShadow("//api.go2map.com/maps/images/v2.0/flag.png")
  }
  //设置标记的名称,用于显示tip和Label。
  function setTitle()
  {
	marker.setTitle("测试setTitle")
  }
  //设置标记可见/不可见。
  function setVisible()
  {
	marker.setVisible(false)
  }
  //设置标记的叠加顺序。
  function setZIndex()
  {
	marker.setZIndex(10)
  }

代码解析

设置标记图片和标记阴影图片。

	var image = new sogou.maps.MarkerImage('//api.go2map.com/maps/images/v2.0/flag.png',
		// 标记图标宽20像素,高32像素
		new sogou.maps.Size(20, 32),
		// 原点在图片左上角,设为(0,0)
		new sogou.maps.Point(0,0),
		// 锚点在小旗的旗杆脚上,相对图标左上角位置为(0,32)
		new sogou.maps.Point(0, 32),
		// 如果是合并的图片,必须设置此项,指定图片大小
		// 如果是一张图片一个图标,此项可缺省。
		new sogou.maps.Size(20, 32));
	var shadow = new sogou.maps.MarkerImage('//api.go2map.com/maps/images/v2.0/flag_shadow.png',
		//阴影图标宽高
		new sogou.maps.Size(37, 32),
		new sogou.maps.Point(0,0),
		new sogou.maps.Point(0, 32));

设置标记对象的点击区域。

	//shape定义点击的图标区域
	//图片即使透明也是矩形的
	//设置shape后,可以看到鼠标放在旗杆旁的右侧是不变小手的
	var shape={
		coord: [1,1,1,20,18,20,18 ,1],
		type:'poly'
	};

设置标记对象规范。

	/*************************************
	 *		MarkerOptions 对象规范 示例	 *
	 *************************************/
	var markerOptions={
		//设置是否在鼠标悬停时显示Label
		disableLabel:false,
		//如果为 true,则可拖动标记。默认值为 false。
		draggable:true,
		//前景的默认图标 icon和icons使用其中一个即可
		//如果同时存在,优先使用icons
		//取值类型 String|MarkerImage|MarkerStyle
		//可以是一个图片地址,也可以是MarkerImage或者MarkerStyle对象
		icon:image,
		//0 前景的默认图标,1 前景鼠标悬停时的图标
		//icons:[],
		//Marker的编号标识。
		id:"ID00001",
		//设置Label对象的参数。
		//设置成初始即可见,相对于Marker居下对齐,
		//align 取值:TOP|RIGHT|BOTTOM|LEFT ,对应标记上、右、下、左的位置。
		label:{visible:true,align:"BOTTOM"},
		//显示标记的地图。
        map: map,
		//标记位置。必填。
		position: myPoint,
		//阴影图像。shadow和shadows使用其中一个即可
		//如果同时存在,优先使用shadows
		//取值类型 String|MarkerImage|MarkerStyle
		//可以是一个图片地址,也可以是MarkerImage或者MarkerStyle对象
		shadow:shadow,
		//0 阴影默认图像,1 阴影鼠标悬停时图像。
		//shadows:[],
		//用于拖动/点击的图像地图区域定义。
		shape:shape,
		//Label文本或者鼠标悬停时显示的tip。
        title:"小旗可以拖动哦",
		//如果为 true,则显示标记。默认为true
		visible:true,
		//叠加顺序
		zIndex:0
    };

创建标记对象。

    marker = new sogou.maps.Marker(markerOptions);

设置标记对象拖动和点击的侦听。

	 //当用户停止拖动标记时会触发此事件。
	 sogou.maps.event.addListener(marker,"dragend",function(mouseEvent){
			//mouseEvent为MouseEvent对象事,会有point属性,即事件发生位置的地图坐标
			alert("拖动后位置的坐标为:"+mouseEvent.point)
	 });
	 //点击标记图标后会触发此事件。
	 sogou.maps.event.addListener(marker,"click",function(event){
			//event是浏览器的event对象
			alert("标记被点击了")
	 });

标记对象的各种设置和方法。

  //获取当前改标记是否可拖拽。
  function getDraggable()
  {
	alert(marker.getDraggable())
  }
  //获取当前标记对象的前景图标。
  function getIcon()
  {
	alert(marker.getIcon())
  }
  //获取显示所在的Map对象。
  function getMap()
  {
	alert(marker.getMap())
  }
  //获取显示所在的Map对象。
  function getPosition()
  {
	alert(marker.getPosition())
  }
  //获取标记的名称。
  function getTitle()
  {
	alert(marker.getTitle())
  }
  //获取标记当前是否可见。
  function getVisible()
  {
	alert(marker.getVisible())
  }
  //获取标记当前的叠加顺序。
  function getZIndex()
  {
	alert(marker.getZIndex())
  }
  //设置标记可被拖拽。
  function setDraggable()
  {
	marker.setDraggable(false)
  }
  //设置标记的前景图标。
  function setIcon()
  {
	//支持3种类型:String|MarkerImage|MarkerStyle
	marker.setIcon("//api.go2map.com/maps/images/v2.0/S20.png")
  }
  //设置标记的默认前景图标和鼠标悬停时前景图标
  //参数为数组,有2个元素,第1个表示默认前景图标,第2个表示鼠标悬停时的前景图标。
  function setIcons()
  {
	//支持3种类型:String|MarkerImage|MarkerStyle
	marker.setIcons(["//api.go2map.com/maps/images/v2.0/S20.png","//api.go2map.com/maps/images/v2.0/flag.png"])
  }
  //在指定地图上渲染标记。如果地图设置为 Null,则会删除此标记。
  function setMap()
  {
	marker.setMap(null)
  }
  //设置标记的位置,支持搜狗地图坐标和经纬度坐标。
  function setPosition()
  {
	marker.setPosition(new sogou.maps.Point(12955867,4824730))
  }
  //设置标记的阴影。
  function setShadow()
  {
	//支持3种类型:String|MarkerImage|MarkerStyle
	marker.setShadow("//api.go2map.com/maps/images/v2.0/flag.png")
  }
  //设置标记的名称,用于显示tip和Label。
  function setTitle()
  {
	marker.setTitle("测试setTitle")
  }
  //设置标记可见/不可见。
  function setVisible()
  {
	marker.setVisible(false)
  }
  //设置标记的叠加顺序。
  function setZIndex()
  {
	marker.setZIndex(10)
  }

完整代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>搜狗地图 JavaScript API 示例: 标记的完整示例</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 type="text/javascript" src="//api.go2map.com/maps/js/api_v2.5.1.js"></script>
<script type="text/javascript">
  var marker;
  function initialize() {
    var myPoint = new sogou.maps.Point(12956867,4824730);
    var myOptions = {
      zoom: 15,
      center: myPoint,
      mapTypeId: sogou.maps.MapTypeId.ROADMAP
    }
    var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);
	/*************************************
	 *		MarkerImage 类 示例			 *
	 *************************************/
	var image = new sogou.maps.MarkerImage('//api.go2map.com/maps/images/v2.0/flag.png',
		// 标记图标宽20像素,高32像素
		new sogou.maps.Size(20, 32),
		// 原点在图片左上角,设为(0,0)
		new sogou.maps.Point(0,0),
		// 锚点在小旗的旗杆脚上,相对图标左上角位置为(0,32)
		new sogou.maps.Point(0, 32),
		// 如果是合并的图片,必须设置此项,指定图片大小
		// 如果是一张图片一个图标,此项可缺省。
		new sogou.maps.Size(20, 32));
	var shadow = new sogou.maps.MarkerImage('//api.go2map.com/maps/images/v2.0/flag_shadow.png',
		//阴影图标宽高
		new sogou.maps.Size(37, 32),
		new sogou.maps.Point(0,0),
		new sogou.maps.Point(0, 32));
	/*************************************
	 *	MarkerShape  对象规范 示例		 *
	 *************************************/
	//shape定义点击的图标区域
	//图片即使透明也是矩形的
	//设置shape后,可以看到鼠标放在旗杆旁的右侧是不变小手的
	var shape={
		coord: [1,1,1,20,18,20,18 ,1],
		type:'poly'
	};
	/*************************************
	 *		MarkerOptions 对象规范 示例	 *
	 *************************************/
	var markerOptions={
		//设置是否在鼠标悬停时显示Label
		disableLabel:false,
		//如果为 true,则可拖动标记。默认值为 false。
		draggable:true,
		//前景的默认图标 icon和icons使用其中一个即可
		//如果同时存在,优先使用icons
		//取值类型 String|MarkerImage|MarkerStyle
		//可以是一个图片地址,也可以是MarkerImage或者MarkerStyle对象
		icon:image,
		//0 前景的默认图标,1 前景鼠标悬停时的图标
		//icons:[],
		//Marker的编号标识。
		id:"ID00001",
		//设置Label对象的参数。
		//设置成初始即可见,相对于Marker居下对齐,
		//align 取值:TOP|RIGHT|BOTTOM|LEFT ,对应标记上、右、下、左的位置。
		label:{visible:true,align:"BOTTOM"},
		//显示标记的地图。
        map: map,
		//标记位置。必填。
		position: myPoint,
		//阴影图像。shadow和shadows使用其中一个即可
		//如果同时存在,优先使用shadows
		//取值类型 String|MarkerImage|MarkerStyle
		//可以是一个图片地址,也可以是MarkerImage或者MarkerStyle对象
		shadow:shadow,
		//0 阴影默认图像,1 阴影鼠标悬停时图像。
		//shadows:[],
		//用于拖动/点击的图像地图区域定义。
		shape:shape,
		//Label文本或者鼠标悬停时显示的tip。
        title:"小旗可以拖动哦",
		//如果为 true,则显示标记。默认为true
		visible:true,
		//叠加顺序
		zIndex:0
    };
    marker = new sogou.maps.Marker(markerOptions);
	/****************************************
	 *事件 示例 (侦听要放在创建marker对象后)*
	 ****************************************/
	 //当用户停止拖动标记时会触发此事件。
	 sogou.maps.event.addListener(marker,"dragend",function(mouseEvent){
			//mouseEvent为MouseEvent对象事,会有point属性,即事件发生位置的地图坐标
			alert("拖动后位置的坐标为:"+mouseEvent.point)
	 });
	 //点击标记图标后会触发此事件。
	 sogou.maps.event.addListener(marker,"click",function(event){
			//event是浏览器的event对象
			alert("标记被点击了")
	 });
  }
	/*************************************
	 *			Marker 方法 示例    	 *
	 *************************************/
  //获取当前改标记是否可拖拽。
  function getDraggable()
  {
	alert(marker.getDraggable())
  }
  //获取当前标记对象的前景图标。
  function getIcon()
  {
	alert(marker.getIcon())
  }
  //获取显示所在的Map对象。
  function getMap()
  {
	alert(marker.getMap())
  }
  //获取显示所在的Map对象。
  function getPosition()
  {
	alert(marker.getPosition())
  }
  //获取标记的名称。
  function getTitle()
  {
	alert(marker.getTitle())
  }
  //获取标记当前是否可见。
  function getVisible()
  {
	alert(marker.getVisible())
  }
  //获取标记当前的叠加顺序。
  function getZIndex()
  {
	alert(marker.getZIndex())
  }
  //设置标记可被拖拽。
  function setDraggable()
  {
	marker.setDraggable(false)
  }
  //设置标记的前景图标。
  function setIcon()
  {
	//支持3种类型:String|MarkerImage|MarkerStyle
	marker.setIcon("//api.go2map.com/maps/images/v2.0/S20.png")
  }
  //设置标记的默认前景图标和鼠标悬停时前景图标
  //参数为数组,有2个元素,第1个表示默认前景图标,第2个表示鼠标悬停时的前景图标。
  function setIcons()
  {
	//支持3种类型:String|MarkerImage|MarkerStyle
	marker.setIcons(["//api.go2map.com/maps/images/v2.0/S20.png","//api.go2map.com/maps/images/v2.0/flag.png"])
  }
  //在指定地图上渲染标记。如果地图设置为 Null,则会删除此标记。
  function setMap()
  {
	marker.setMap(null)
  }
  //设置标记的位置,支持搜狗地图坐标和经纬度坐标。
  function setPosition()
  {
	marker.setPosition(new sogou.maps.Point(12955867,4824730))
  }
  //设置标记的阴影。
  function setShadow()
  {
	//支持3种类型:String|MarkerImage|MarkerStyle
	marker.setShadow("//api.go2map.com/maps/images/v2.0/flag.png")
  }
  //设置标记的名称,用于显示tip和Label。
  function setTitle()
  {
	marker.setTitle("测试setTitle")
  }
  //设置标记可见/不可见。
  function setVisible()
  {
	marker.setVisible(false)
  }
  //设置标记的叠加顺序。
  function setZIndex()
  {
	marker.setZIndex(10)
  }
</script>
</head>
<input type="button" onclick="getDraggable()" value="getDraggable()" />
<input type="button" onclick="getIcon()" value="getIcon()" />
<input type="button" onclick="getMap()" value="getMap()" />
<input type="button" onclick="getPosition()" value="getPosition()" />
<input type="button" onclick="getTitle()" value="getTitle()" />
<input type="button" onclick="getVisible()" value="getVisible()" />
<input type="button" onclick="getZIndex()" value="getZIndex()" />
<input type="button" onclick="setDraggable()" value="setDraggable()" />
<input type="button" onclick="setIcon()" value="setIcon()" />
<input type="button" onclick="setIcons()" value="setIcons()" />
<input type="button" onclick="setMap()" value="setMap()" />
<input type="button" onclick="setPosition()" value="setPosition()" />
<input type="button" onclick="setShadow()" value="setShadow()" />
<input type="button" onclick="setTitle()" value="setTitle()" />
<input type="button" onclick="setVisible()" value="setVisible()" />
<input type="button" onclick="setTitle()" value="setTitle()" />
<input type="button" onclick="setZIndex()" value="setZIndex()" />
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

运行代码